css - 如何垂直对齐 li 内的 anchor ？

Question

我想在最后一个 <li> 中创建一个带有“按钮”( anchor )的菜单.

到目前为止一切顺利，但是当我想要创建按钮时，我无法将其垂直居中。

这里是 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 1

如果您想将 <a> 垂直居中标签以及其中的文本，您可以使用 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>