使用基础的垂直居中菜单

Question

这是一个演示：demo

我只想知道，使用foundation simple menu，如何垂直对齐。我是新手，所以如果我的问题有点愚蠢，我很抱歉：

代码在这里：

<nav>
        <ul class="menu expanded align-center">
            <li class="image"><i class="fab fa-cloudversify fa-3x"></i></li>
            <li><a href="#"><i></i><span>Inicio</span></a></li>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
        </ul>  
</nav>

Css:

ul li {
    height: 70px;
    background-color: #2b2b2b;
}

图书馆：基金会

Answer 1

看看这个

.menu-centered {
  list-style-type: none;
}

.menu-centered.vertical > li {
 margin: .5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css" rel="stylesheet"/>
<ul class="menu-centered vertical">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Inicio</a></li>
</ul>

Answer 2

将 flex 添加到 a 标签并确保它完全适合 li 元素，这样您就可以定位文本。

例子看我笔：https://codepen.io/anon/pen/qyPMVx

.html

<nav>
<ul class="menu expanded align-center">

<li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Inicio</a></li>
        </ul>  
</nav>

.css

ul li {
    height: 70px;
    background-color: #2b2b2b;
}
.menu.expanded a{
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
}

使用基础的垂直居中菜单

Vertical center menu using foundation

css

zurb-foundation