Question

我正在尝试创建标题/导航栏，徽标两侧会有导航选项，我希望所有这些选项都垂直居中。为实现这一目标，我使用的是<li>和<li class>元素，但我对垂直居中很不满意。有什么想法吗？

HTML

<header>
    <nav>
        <ul>
            <li class="btn"><a href="#"><span>01</span>Home</a></li>
            <li class="btn"><a href="#"><span>02</span>Vendors</a></li>
            <li><a href="#"><img src="img/logo.png" alt="sews logo" /></a></li>
            <li class="btn"><a href="#"><span>03</span>Tickets</a></li>
            <li class="btn"><a href="#"><span>04</span>Blog</a></li>
        </ul>
    </nav>
</header>

CSS

nav {
    margin: 40px auto;
    width: 600px;
    padding-bottom: 80px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    margin:0 10px;
}

nav ul li.btn a {
    padding-top: -10px;
}

nav ul li a span {
    color: #e3c22a;

font-family: fanwood;

}

Answer 1

要垂直居中，请在容器元素上除display: table cell之外应用css规则vertical-align: middle。

Answer 2

如果链接和图像位于相同的元素中，例如div，则可以将图像设置为使用样式标记：vertical-align：middle;

Answer 3

position relative标题。 position absolute图片。 left: 50%;图片

导航中间的徽标 - 如何垂直居中

3 个答案: