Search code examples
htmlcssalignment

List items appearing below other list items containing images

I'm trying to create a simple navigation that consists of five list items. All of which are 20% in width. There are two items containing text, a centered item containing the site logo as an image and then another two list items containing text.

My issue is that when I have an image in the third item, the text in the surrounding list items gets bumped down. I can't see any margins or anything acting upon them or any reason why this should be happening and no matter what I try, it doesn't seem to work.

Any ideas or an explanation would be much appreciated :)!

JSFiddle

HTML

<div class="navigation">
    <div class="container">
        <ul>
            <li><a href="/">Home</a></li><!--
            --><li><a href="/">Categories</a></li><!--
            --><li><img src="http://www.placehold.it/140x64"></li><!--
            --><li><a href="/">Contact</a></li><!--
            --><li><a href="/">Personalise</a></li>
        </ul>
    </div>
</div>

CSS

.navigation {
    top: 0;
    width: 100%;
    height: 64px;
    position: fixed;
    background: #ffffff;
    border-bottom: 1px solid #dfdfdf;
}

.navigation .container {
    width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}

.navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.navigation li {
    width: 20%;
    height: 64px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
}
Solution

  • Add or replace this CSS properties in your .navigation li rules :

    display: table-cell;
vertical-align: middle;

    Example