Geek asks and answers

Centering the vertical navigation bar

I have a title with two elements. The first is the image, which is the company logo and has a width of 25%. Another is a navigation bar with elements embedded in a horizontal position. I would like the navigation bar to be vertically centered, but I can't figure it out. I set everything I know for an element that can use vertical alignment, and put everything in the displayed row or cell of the table to apply it. Nothing is working.

Keep in mind that the reason I don't just assign it a static percent indent or top margin is because as the page gets wider, the image height increases as the width increases as you expand the browser horizontally, navigation is becoming more and more out of place.

I would really appreciate any help as I tried (much longer than I would like to admit) to simply center the object vertically.

HTML is abbreviated:

<div id="container">
<header id="header" role="banner">
    <img src="images" />
    <nav id="nav" role="navigation">
    <ul>
        <li><a href="#" title="About Us">About Us</a></li>
        <li><a href="#" title="Biographies">Biographies</a></li>
        <li><a href="#" title="Services">Services</a></li>
        <li><a href="#" title="Careers">Careers</a></li>
        <li><a href="#" title="Contact">Contact</a></li>
    </ul>
    </nav>
</header>

CSS shortened:

header img {
    height: auto;
    width: 25%;
    float: left;
    }

header nav {
    width: 75%;
    font-size: 1em;
    }

header nav li {
    display: inline-block;

    width: 19%;
    }

header nav li a {
    background: #2CB2E6;
    line-height:

Here is a simple jsFiddle: http://jsfiddle.net/LbTCT/

+8
source share
3 answers

Here is the fork of your original violin. You need to install inline-blockon your logo and the element itself nav:

header img, header nav {
    display: inline-block;
    vertical-align: middle;
}

, float .

+8

, . , , . , , , , :

CSS :

header {
    position:relative;
    display:block;
}
header:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
header nav {
    width: 70%;
    font-size: 1em;
    position: absolute;
    top: 50%;
    line-height: 200%;
    margin-top: -2em;
}
0

, .

<div id="header">
<header role="banner">
    <nav id="navigation" role="navigation">
        <ul>
            <li>
                <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png">
            </li>
            <li><a href="#" title="About Us">About Us</a>

            </li>
            <li><a href="#" title="Biographies">Biographies</a>

            </li>
            <li><a href="#" title="Services">Services</a>

            </li>
            <li><a href="#" title="Careers">Careers</a>

            </li>
            <li><a href="#" title="Contact">Contact</a>

            </li>
        </ul>
    </nav>
    </header>
</div>

CSS :

    #header {
        background-color: #cccccc;
        padding: 5px 0;
    }
    header {
        background-color: #f0f0f0;
    }
    header nav {
        border: 1px solid red;
    }
    header nav ul {
        margin: 0;
        padding: 0;
    }
    header nav li {
        display: inline;
        margin: 0;
        padding: 0;
    }
    header nav li img {
        vertical-align: middle;
        border: 1px solid blue;
    }
    header nav li a {
        vertical-align: middle;
        font-size: 1.00em;
        text-decoration: none;
        background-color: white;
        color: black;
        padding: 10px;
        margin: 0 0 0 10px;
    }

<li> . inline vertical-align: middle, .

, , .

: http://jsfiddle.net/audetwebdesign/adW9Y/

Note:
This code also allows you to scale the image size using the viewport.

By adding the following CSS rule:

.autoSize {
   width: inherit;
}
.autoSize img {
    width: 25%;
}

and adding a class to the markup as follows:

<li class="autoSize">
    <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png">
</li>

As the item ulexpands to the width of the view port, you can inherit the width of the child lithat wraps the image. Then you set the relative width for the image (25% in this example), and you get flexible / flexible scaling.

0
source

More articles:


All Articles