时间戳

首页 > 解决方案 > 使用基础的垂直居中菜单

css - 使用基础的垂直居中菜单

问题描述

这是一个演示：演示

我只想知道，使用基础简单菜单，我怎样才能垂直对齐它。我是新手，所以如果我的问题有点愚蠢，我很抱歉：

代码在这里：

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

图书馆：基金会

标签： csszurb-foundation

解决方案

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

推荐阅读