How do I middle-align my header menu items in WordPress [closed]

Although this is not a WordPress related question and should be asked on StackOverflow instead, but to align your menu items vertically, you have at least 3 options. Assuming your HTML structure is like the following:

<nav>
    <ul>
        <li>
            <a href="#">My FIRST ITEM</a>
        </li>
        <li>
            <a href="#">My SECOND ITEM</a>
        </li>
    </ul>
</nav>

Option 1 Set the line height of your anchor to the same height as it’s parent. Let’s say your <nav> has a height of 75px. You should set the anchors line height to 75px too:

.nav a {
    line-height:75px;
}

It doesn’t have to be <nav>. It’s parent can be any of these in this case: <nav>, <ul> or <li>.

Option 2 Give a height to your anchor’s parent and then align the anchor vertically:

.li {
    height:75px;
}
.li a {
    vertical-align:middle;
}

Option 3 Give your anchor some paddings. Set the padding for it’s top and bottom:

.nav a {
    padding:25px 0;
}

Try to increase/decrease the amount of padding until the anchor is place in the middle of the line.

All of the above will produce the same effect. However, they might act a bit different in other properties like background’s color.

Related Posts: