'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>
css


Solution 1:[1]

Add vertical-align: middle to .vertical.

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

Solution 2:[2]

If you would like to vertically center the <a> tag as well as the text inside of it, you can use flexbox.

CSS

.vertical
{
  display: inline-flex;
  align-items: center;
}

JSFiddle

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-flex;
  align-items: center;
  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>

Solution 3:[3]

Vertical-align as @tatty say is ok but you also need to adjust the height of the element:

.vertical
{
  display: inline-block;
  height: 60px;
  background-color:red;
  vertical-align: middle;
}

Otherwise it wil not be on the same line with your other elements

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 akcan
Solution 2
Solution 3 Franco

Related Questions