C.Ronaldo C.Ronaldo - 2 months ago 7
CSS Question

How to vertical align an anchor inside li?

I want to create a menu with a 'button' (anchor) in the last

<li>
.

So far so good, but when I want to create the button, I can't get it to vertical center it.

Here is a live demo.



nav
{
width: 100%;
height: 60px;

background-color:blue;
}

ul
{
list-style-type:none;
}

li
{
height: 60px;
color: #000000;
font-family: $font-family-semi-bold;
float:left;
background-color:green;
line-height:60px;
margin-left: 20px;
margin-right: 20px;
}

.vertical
{
display: inline-block;
height: 40px;
background-color:red;
}

<nav>
<ul>
<li>Hello World1</li>
<li>Hello World2</li>
<li>Hello World3</li>
<li>
<a href="#" class="vertical">
Vertical align this!
</a>
</li>
</ul>
</nav>




Answer

Add vertical-align: middle to .vertical.

code updated https://jsfiddle.net/wksfdszu/1/

Comments