如何垂直对齐锚元素中的文本，该元素嵌套在无序列表中 [英] How do I vertically align text inside an anchor element, which is nested within an unordered list

问题描述

我已经进行了大量搜索，并使用 vertical-align 属性查看了许多关于如何 vertical-align 和 line-height 属性。然而，我的努力似乎没有结果，因为我无法让我的文本垂直对齐。如何做垂直对齐文本为中心？ height 属性不固定，因此我不能使用 line-height 。

I have searched extensively and seen numerous examples on how to vertical-align text using the vertical-align property and the line-height property. However, all my efforts seem to bear no fruit as I am unable to get my text to align vertically. How do I do vertically align text to be centered? The height properties are not fixed so I can't use 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的内联框。 DEMO

you may use a pseudo element displayed as an inline-box using full height of li and vertical-aligned to midlle. DEMO

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

这篇关于如何垂直对齐锚元素中的文本，该元素嵌套在无序列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！