0

我正在尝试创建一个标题/导航栏，其中徽标的两侧都有导航选项，我希望所有这些都垂直居中。为了实现这一点，我正在使用<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;

}

4

3 回答 3

1

display: table cell要垂直居中某些东西，除了vertical-align: middle容器元素之外，还应用 css 规则。

于 2012-12-19T22:52:15.710 回答
0

如果链接和图片在同一个元素中，比如一个 div，你可以设置图片使用样式标签：vertical-align:middle;

于 2012-12-19T22:51:16.780 回答
-1

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

于 2012-12-19T22:52:11.280 回答