using css to center an element

Question

I am trying to align the elements in the head portion of a webpage properly.

There are three elements placed inside a header div:

The site logo (as an image) wrapped in an anchor tag should be left justified.
A div that contains a bunch of vertically aligned menu elements right justified.
A form containing a search box and a go button. This must be centered horizontally in the page and show between to logo on the left and the menu items on the right.

All three elements should be justified to the bottom of the header div.

I have been wrestling with this but nothing seems to work. Can you please help? Thanks!

score 0 · Answer 1 · answered Oct 05 '11 at 03:21

0

<div style="float: right;">
    <ul>
        <li>Menu item</li>
    </ul>
</div>
<div style="float: left;">
    <a href="/"><img style="border: 0;" src="something.png" /></a>
</div>
<div style="width: 300px; margin: 0 auto;">
    Search box
</div>

Just a quick mockup.

answered Oct 05 '11 at 03:21

Julian H. Lam

25,501
13
46
73

thanks! both answers are identical. neither aligns to the bottom. and adding vertical-align:bottom; to it doesn't do anything. – Barka Oct 05 '11 at 04:16
How are you vertical aligning? CSS `vertical-align` is a tricky beast... try applying it to the children elements instead of the parent. – Julian H. Lam Oct 05 '11 at 13:07

hazzik · Answer 2 · 2011-10-05T06:32:58.803

UPDATE: using table/table-cell trick to allow vertical-align: bottom;

You need to wrap your manu, logo and searchbox into <div> with display: table-cell; css rule.

The markup:

<div class="table header">
    <div class="table-cell">
        <div class="logo">&nbsp;</div>
    </div>
    <div class="table-cell">
        <div class="searchbox">&nbsp;</div>
    </div>
    <div class="table-cell">
        <div class="menu">&nbsp;<br/><br/><br/><br/><br/><br/><br/><br/></div>
    </div>
</div>

and css:

.table {
    display: table; /* our outer contaner should behave like table; */
    width: 100%;    /* set width to 100% */
}
.table-cell {
    display: table-cell; /* our internal wrapper should behave like table cell to allow vertical-align */
    vertical-align: bottom; /* align all elements vertical */
    background: yellow; /* for debug purposes */
}
.logo {
    float: left;
    width: 100px;
    background: green;
}
.menu {
    float: right;
    width: 100px;
    background: red;
}
.searchbox {
    margin: 0 auto;
    width: 100px;
    background: blue;
}

Complete example: http://jsfiddle.net/EREmH/4/

Thanks! It almost works. But it doesn't vertically align all elements to the bottom. The search form is aligned to the top, and adding vertical-align:bottom; to it doesn't do anything. — Barka, Oct 05 '11 at 04:02
Just note that table-cell isn't supported by IE7 (or IE6, but let's forget it exists). http://www.quirksmode.org/css/display.html — mrtsherman, Oct 06 '11 at 04:11
You can use hack described in this answer http://stackoverflow.com/questions/249103/ie7-and-the-css-table-cell-property/4963526#4963526 — hazzik, Oct 06 '11 at 11:50

using css to center an element

2 Answers2