how to center floating elements?
- Started
- Last post
- 10 Responses
- ********
Hi, I have one problem;
There is navigation bar, with list as buttons<div id="nav">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>All list items <li> are floted to the left, but I want them to appear in the center of the navigation bar <div id="nav">; I tried margin: 0 auto 0; for <ul> but it doesn't work; the problem is that number of the list items is different on every page;
Thanks
- ernexbcn0
Put list-style:none; to the UL
- trooper0
wrote this in 06 for you :)
- trooper0
and you dont need to put UK inside a DIV just id the UL dude (pet peeve)
- trooper0
^ UL not UK
- Haydesign0
#nav {
text-align: center;
}????
- doesn't work, I am using image repalcement with css sprites and I ithink that there is collisions somewhere********
- doesn't work, I am using image repalcement with css sprites and I ithink that there is collisions somewhere
- Haydesign0
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>CSS
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}#navlist li
{
display: inline;
list-style-type: none;
}#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
- fugged0
if you set an absolute width on the list elements and set their margin to 0 auto, it should work.
#nav li {
width:200px;
margin: 0 auto;
}- *should - meaning I haven't tried...fugged
- yep this is what i was thinking. agree it should work too.creativeworld
- trooper0
ul{text-align:center}
li{display:inline}then inside in the <a or whatever use
display:block;width:100px;height...
mark
- ********0
thanks for help guys!
- 7point340
yeah you need width and height and possibly display to make things center (or at least make all browsers recognize it)
then coupled with margin: 0 auto; it should work just fine