如何在锚元素内垂直对齐文本，该锚元素嵌套在无序列表中

Kis 发表于 Dev

Kis

我进行了广泛的搜索，并看到了许多有关如何vertical-align使用vertical-align属性和line-height属性进行文本发送的示例。但是，由于无法使文本垂直对齐，我的所有努力似乎都没有结果。如何使文本垂直居中对齐？该height属性是不固定的，所以我不能使用line-height。

的HTML

<nav>
    <ul>
        <li><a href="html/login.html">Login</a></li>
        <li><a href="html/user_registration.html">Register</a></li>
        <li><a href="#">Programmes Offered</a></li>
    </ul>
</nav>

的CSS

nav
{
    height: 30%;
    width: 100%;
}

nav ul
{
    height: 100%;
    margin: 0px;
}

nav ul li
{
    height: 33%;
    width: 100%;
    vertical-align: middle;
}

西里尔

您可以使用显示为嵌入式框的伪元素，并使用li的全高并将其垂直对齐到midlle。演示

body, html {
    height:100%; /* needed for demo */
}
nav {
    height: 50%; /* increased for demo */
    width: 100%;
}
nav ul {
    height: 100%;
    margin: 0px;
}
nav ul li {
    height: 33%;
    box-shadow:inset 0 0 0 1px; /* show me li , for demo */
}
nav ul li:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align: middle;
}

编辑

如果您还重置display并vertical-align打开<a>，则链接可以分布在几行上（下面的演示）：

body,
html {
  height: 100%;
}

nav {
  height: 70%; /* height set for snippet demo purpose, could be really too much  */
  width: 100%;
}

nav ul {
  height: 100%; /* will follow height, inherit height value , set in nav if any avalaible  */
  margin: 0px;
}

nav ul li {
  height: 33%;
  /* see me and my center*/
  box-shadow: inset 0 0 0 1px;
  background:linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 50%);
}

nav ul li:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

a {
  display: inline-block;
  vertical-align: middle;
}

<nav>
  <ul>
    <li><a href="html/login.html">Login</a>
    </li>
    <li><a href="html/user_registration.html">Register</a>
    </li>
    <li><a href="#">Programmes<br/> Offered</a>
    </li>
  </ul>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。