play_ Posted June 22, 2008 Share Posted June 22, 2008 I'm having trouble centering my menu. The way i have always done my menu, was - i make them a list - ul, li float to the left - a display: block but this works when there's a fixed width. Now i just wanna align them in the center of the page. here's the link of what i have (very minimal, for demonstration purpose) http://purrr.org/del.html Notice how i have the container aligned in the middle of the page, but not the text. I could take out float: left and do display: inline, but then it won't let me add top/bottom padding to the links. Thanks. Link to comment https://forums.phpfreaks.com/topic/111314-centering-things/ Share on other sites More sharing options...
play_ Posted June 22, 2008 Author Share Posted June 22, 2008 K Update. Found a way to center floating divs: http://www.cssplay.co.uk/menus/centered.html However, even when i copy and paste the code, doesn't seem to work in IE7 for me. Anyone? Link to comment https://forums.phpfreaks.com/topic/111314-centering-things/#findComment-571745 Share on other sites More sharing options...
dbrimlow Posted June 22, 2008 Share Posted June 22, 2008 I could take out float: left and do display: inline, but then it won't let me add top/bottom padding to the links. Who told you that? Let's remove "text-align:center" from everything but the ul, and add "font-size:small" (which is @ 12px) to the body for a relative size dimension reference (so we can use ems for margin/padding). Also, don't forget to add type="text/css" to the style tag: Then: <style type="text/css"> body, html { margin: 0; padding: 0; font-size:small } .menu-holder{ border: 1px solid red; } .menu { margin: 0 auto; background: #eee; width: 500px; } .menu ul { margin: .5em 0; padding: 0; list-style: none; text-align: center; } .menu li { margin: .5em; padding: .25 .5em; display:inline; } </style> This will center the list AND separately permit margins/paddings on both the ul and li elements Link to comment https://forums.phpfreaks.com/topic/111314-centering-things/#findComment-571846 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.