CSS Horizontal Align Float

css css-float center alignment text-align
user2401856 picture user2401856 · Jun 12, 2013 · Viewed 7.5k times · Source

I have a simple menu and I want to place it in the center of the page using css. Here's the menu: http://jsfiddle.net/kSV4K/4/

Here's the Codes, CSS:

ul#menu { margin:0; padding:0; list-style-type:none; }
ul#menu li { position:relative; float:left; border-bottom:4px solid #efefef; margin-right: 0px; padding-right: 0px; padding-bottom: 5px;}
ul#menu .current { border-bottom:4px solid #3d496a;}
ul#menu li:hover { border-bottom:4px solid #3d496a;}
ul#menu li a { padding:2px 2px; text-decoration:none; font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}
ul#menu li a:hover { color:#8895b8; border:none; }

HTML:

<ul id="menu">
    <li class="current"><a href="#" data-id="div1">Description</a></li>
    <li><a href="#" data-id="div2">Shipping and payment</a></li>
    <li><a href="#" data-id="div3">Returns</a></li>
    <li><a href="#" data-id="div4">Feedback</a></li>
</ul>

Any suggestions?

Answer

Marc Audet picture Marc Audet · Jun 12, 2013

Instead of floats, use inline-blocks on the li elements, and then they can be centered applying text-align: center on the ul block.

ul#menu {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align: center;
}
ul#menu li {
    display: inline-block;
    border-bottom:4px solid #efefef;
    margin-right: 15px;
    padding-right: 20px;
    padding-bottom: 5px;
}

See fiddle: http://jsfiddle.net/audetwebdesign/kSV4K/3/

Related questions

How do I center floated elements?

I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by …

Read More
Make child visible outside an overflow:hidden parent

In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children. But it also has another interesting feature when combined with margin: auto... If PREVIOUS sibling is …

Read More
Centering floating list items <li> inside a div or their <ul>

HTML: <div class="imgcontainer"> <ul> <li><img src="1.jpg" alt="" /></li> <li><img src="2.jpg" alt="" /></li> ..... </ul> </div> I'm …

Read More