Question

这就是它的样子：http://oi58.tinypic.com/j9yr75.jpg http://oi58.tinypic.com/j9yr75.jpg

如何正确地将导航与徽标垂直对齐？

HTML：

<div class="menu-nav">
<ul>
<li><a href="" title="" class="logo">Logo</a></li>
<li><a href="" title="" class="mg">Home</a></li>
<li><a href="" title="" class="mg">Chat Now</a></li>
<li><a href="" title="" class="mg">Mobile Chat</a></li>
<li><a href="" title="" class="mg">Report User</a></li>
</ul>
</div>

CSS：

.menu-nav {

}

.menu-nav ul li {
display: inline-block;
}

.menu-nav ul li a{
color: #fff;
margin: 10px;
}

.menu-nav ul a.mg {

 }

.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}

Answer 1

您可以将名为table的显示方法添加到ul标记，然后添加table-cell显示方法vertical-align:middle，以有效地垂直对齐您的徽标链接。

HTML：

<div class="menu-nav">
    <ul class="a">
        <li><a href="" title="" class="logo">Logo</a>
        </li>
        <li class="navItem"><a href="" title="" class="mg">Home</a>
        </li>
        <li class="navItem"><a href="" title="" class="mg">Chat Now</a>
        </li>
        <li class="navItem"><a href="" title="" class="mg">Mobile Chat</a>
        </li>
        <li class="navItem"><a href="" title="" class="mg">Report User</a>
        </li>
    </ul>
</div>

CSS：

.a{
    display:table;
}
.a li{
    display: table-cell;
    vertical-align:middle;
}

通过此JSFiddle

可以更好地看到这一点

编辑：

您可以通过为li标签提供类并调用该特定类来更新您的保证金。这也可以在上面的JSFiddle中找到，你也可以使用它。

Answer 2

请尝试下面为line-height:60px;

添加.menu-nav ul li a的代码

HTML：

<div class="menu-nav">
<ul>
<li><a href="" title="" class="logo">Logo</a></li>
<li><a href="" title="" class="mg">Home</a></li>
<li><a href="" title="" class="mg">Chat Now</a></li>
<li><a href="" title="" class="mg">Mobile Chat</a></li>
<li><a href="" title="" class="mg">Report User</a></li>
</ul>
</div>

<强> CSS：

.menu-nav {

}

.menu-nav ul li {
display: inline-block;
}

.menu-nav ul li a{
color: #fff;
margin: 10px;
line-height:60px;
}

.menu-nav ul a.mg {

 }

.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}

如何在导航旁边对齐徽标？

2 个答案: