如何在li里面垂直对齐一个锚？

Question

我想创建一个带有按钮的菜单＆＃39; （锚）在最后<li>。

到目前为止一切都那么好，但是当我想要创建按钮时，我无法将其置于垂直中心。

这是a live demo。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

将vertical-align: middle添加到.vertical。

代码已更新https://jsfiddle.net/wksfdszu/1/

Answer 3

垂直对齐为@tatty说没问题，但你还需要调整元素的高度：

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

否则它不会与你的其他元素在同一行