Vertically center text in element

Question

I am currently attempting to vertically center the text in a navigation menu anchor tag with CSS. I have tried multiple CSS attributes, such as height and top with position fixed and display block, but to no avail.

.mainav {
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
}

.mainav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.mainav li {
 float: left;
    border-right: 1px solid #bbb;
}

.mainav li:last-child {
    border-right: none;
}

.mainav li a {
    height:35px;
    top: 20px;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

<div class="mainav">
    <ul>
        <li><a href="/"><img src="" alt="Project Club Logo"></a></li>
        <li><a href="/en/about">About</a></li>
        <li><a href="/en/contact">Contact Us</a></li>
        <li><a href="/en/pricing">Pricing</a></li>
        <li><a href="/en/support">Support</a></li>
        <li><a href="/en/login">Login</a></li>
        <li><a href="/en/signup">Signup</a></li>
    </ul>
</div>

luismiguelss · Accepted Answer · 2018-05-30T00:08:37.530

If what you want to achieve is aligning the text vertically, you can do it like so:

Only works if it's a single line:

.mainav li a {
    height:35px;
    top: 20px;
    display: block;
    color: black;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
    line-height: 35px;
}

Setting the line-height property to the same height and removing the padding (note: you should keep the right and left padding -or margin- in order to leave some space).

.mainav {
    position: fixed;
    top: 0;
    z-index: 3;
    width: 100%;
}
.mainav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.mainav li {
 float: left;
    border-right: 1px solid #bbb;
}

.mainav li:last-child {
    border-right: none;
}

.mainav li a {
    height:35px;
    top: 20px;
    display: block;
    color: black;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
    line-height: 35px;
}

<div class="mainav">
<ul>
  <li><a href="/"><img src="https://4424club.xyz.412quack.com/assets/images/logo.png" alt="Project Club Logo"></a></li>
  <li><a href="/en/about">About</a></li>
  <li><a href="/en/contact">Contact Us</a></li>
  <li><a href="/en/pricing">Pricing</a></li>
  <li><a href="/en/support">Support</a></li>
  <li><a href="/en/login">Login</a></li>
  <li><a href="/en/signup">Signup</a></li>
</ul>
</div>

Vertically center text in element

1 Answers1