css - Center a menu with left align items -
i need design menu, in menu centered, variable number of items, browser resolutions, , items aligned left (menu centered in page, items aligned left).
http://i39.tinypic.com/2vx0ha9.jpg
(as can see not centered @ all).
this 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 , right padding. </div> </body> </html> as can see, external div has 20% padding in order center items. items float left. items not centered @ because remaining space exists in item4 doesn't have enough space, floats next line.
and if menu have 1 menu item, item float left more obvious menu not centered. if try use style center items (text-align or this), item4 appear centered below item2, , need items align left.
i need:
- menu centered in page, number of items
- items centered
- cross-browser compatibility (to ie8 @ least, , mobile explorers)
- no javascript
try using display: inline-block;.
you can add following code:
.extpanel { text-align: center; } .menuelement { display: inline-block; *display: inline; //ie zoom: 1; //ie //remove float: left; } 
Comments
Post a Comment