CODEWITHSUNDEEP
htmlcss
etsnyman
etsnyman

Reputation: 275

Align various objects/items vertically with CSS

I am building a temporary site, and I want to align (to middle) the logo and the menu items vertically, but I am unable to achieve success.

Here is my current HTML code:

<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>

<body>
    <div class="header">
        <a class="logo" href="/index.html"><img class="logo" src="/images/logo.png"></a>

        <a class="menu" href="/whatever.html">Menu Item 1</a>
        <a class="menu" href="/whatever.html">Menu Item 2</a>
        <a class="menu" href="/whatever.html">Menu Item 3</a>
        <a class="menu" href="/whatever.html">Menu Item 4</a>
    </div>

</body>
</html>

and here is my current CSS code:

.header {
    display: block;
}

.logo {
    display: inline-block;
    vertical-align: middle;
}

.menu {
    display: inline-block;
    vertical-align: middle;
}

I have removed all other styling, like colors, to simplify.

Any help would be appreciated!

Upvotes: 1

Views: 111

Answers (1)

qiu-deqing
qiu-deqing

Reputation: 1333

according to w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical

CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

so the code is really simple

#container{
    display: table-cell;
    vertical-align: middle;
    height: 200px;
}

here is a demo http://jsfiddle.net/4PJUr/

Upvotes: 2

Related Questions