Search code examples
htmlcsshtml-listsanchorfill

HTML5/CSS3 how to expand an anchor element to fit full size of it's li parent

I've got an unordered list which holds a few items. It's purpose is to become a navbar. The list is set up to be displayed as a table-row with each li element a table-cell, these elements each hold an anchor tag with the first one holding the logo. The issue is that the anchor elements are positioned to the bottom vertically and I can't find a way to center them.

Here's an image of the issue:

enter image description here

I've colored the <a> background green and <li> background red. As it's visible here the text anchor items are positioned to the bottom and I can't figure out how to:

a) position the anchor text to the vertical center
b) have the anchor fill the entire height of the parent li

I've tried adding vertical-align: center; to both li and a but it did not work.

Here are relevant pieces of my html/css code so far

HTML: 

<body>
        <header class="mainHeader">
            <nav>
                <ul>
                    <li><a href="index.html"><img class="logo" src="logo.png" alt="index"></a></li>
                    <li><a href="#">Item1</a></li>
                    <li><a href="#">Item2</a></li>
                    <li><a href="#">Item3</a></li>
                </ul>
            </nav>
        </header>
        <footer></footer>
</body>

CSS: 

.mainHeader {
    background-color: #111;
    color: #999;

    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#111), to(#444));
    background-image: -webkit-linear-gradient(#111, #444);
    background-image: -moz-linear-gradient(#111, #444);
    background-image: -o-linear-gradient(#111, #444);
    background-image: linear-gradient(#111, #444);

    -webkit-box-shadow: 0 1px 1px #777;
    -moz-box-shadow: 0 1px 1px #777;
    box-shadow: 0 1px 1px #777;

    text-decoration: none;
    text-shadow: 0 1px 0 #777;

    overflow: hidden;
}

.logo {
    max-width: 130px;
    max-height: 170px;
}

.mainHeader ul{
    display: table-row;
}

.mainHeader li{
    width: 130px;
    display: table-cell;
    text-align: center;
    background-color: red;
}

.mainHeader a{
    display: block;
    background-color: green;
    text-decoration: none;
    color: #999;
}
Solution

  • You can modify your CSS as below to get the expected behavior. Refer inline comments for modified items.

    .logo {
    max-width: 130px;
    max-height: 170px;
    vertical-align: middle; /* added */
}
.mainHeader li {
    width: 130px;
    display: table-cell;
    text-align: center;
    background-color: red;
    vertical-align: middle; /* to position contents in middle of nav bar */
    line-height: 150px; /* added */
}
.mainHeader a {
    display: inline-block; /* modified to support vertical-align */
    width: 100%;
    background-color: green;
    text-decoration: none;
    color: #999;
}

    Demo Fiddle