StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCenter a menu with left align items
primarykey
Id
17776155
data
AcceptedAnswerId
0
AnswerCount
4
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-07-21T19:42:52.590
FavoriteCount
1
LastActivityDate
2013-07-22T11:04:18.517
LastEditDate
2013-07-21T21:02:51.940
LastEditorUserId
1947286
OwnerUserId
2456482
ParentId
0
PostTypeId
1
Score
0
ViewCount
622
LastEditorDisplayName
text
Body
<p>I need to design a menu, in which the menu is always centered, with variable number of items, browser resolutions, and the items would be aligned to the left (menu centered in the page, but items aligned to the left).</p> <p><a href="http://i39.tinypic.com/2vx0ha9.jpg" rel="nofollow noreferrer">http://i39.tinypic.com/2vx0ha9.jpg</a></p> <p>(As you can see it is not centered at all).</p> <p>This is my code:</p> <pre><code><html> <head> <style type="text/css"> .extPanel{ background-color:#555; padding: 0px 20% 0px 20%; display: table; } .split{ clear: both; } .menuElement{ float:left; background-color:#aaa; margin: 0px 20px 20px 0px; width: 200px; height: 200px; text-align: center; } </style> </head> <body> <div class="extPanel"> <div class="menuElement">item1</div> <div class="menuElement">item2</div> <div class="menuElement">item3</div> <div class="menuElement">item4</div> <div class="split"></div> External Panel. 20% left and right padding. </div> </body> </html> </code></pre> <p>As you can see, the external div has 20% padding in order to center the items. Items float to the left. Items are not centered at all because a remaining space exists in which item4 doesn't have enough space, so it floats to the next line. </p> <p>And if the menu would have only one menu item, this item float to left so is more obvious that the menu is not centered. If I try to use some style to center all the items (text-align or something like this), item4 would appear centered below item2, and I need that the items are align to left.</p> <p>I need:</p> <ul> <li>Menu to be centered in the page, with any number of items </li> <li>Items centered </li> <li>Cross-browser compatibility (to IE8 at least, and mobile explorers) </li> <li>No JavaScript</li> </ul>
Tags
<css><menu><center>
Title
Center a menu with left align items
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USapaul
UserOwnerUserId
1. USCarlosTI
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POCenter a menu with left align items
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTApproveEditSuggestion
2. VO
  singulars
  PostPostId
  POCenter a menu with left align items
  UserUserId
  USG-Cyr
  VoteTypeVoteTypeId
  VTFavorite
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.