Question

我有这个导航栏：

    <ul>
        <li class="logo-container"><a href="#"><img src="frontend/images/3.svg"></a></li>

        <li class="navigation">
            <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Work</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Work With Us</a></li>
            </ul>
        </li>

        <li class="menu">
            <ul>
                <li><a href="#">My Account</a></li>
            </ul>
        </li>
    </ul>

我希望徽标（“徽标 - 容器”）与其他导航元素垂直对齐

相关的css：

.logo-container{
    display: inline-block;
    width: 100px;
    margin: auto;
}

.logo-container img {
    width: 35%;
    display: block;
    margin: auto;
}

我试过显示：inline＆amp;线高度与中殿高度相同，尝试填充和边缘顶部，但它将导航的其余部分向下移动...

Click here for the Fiddle

Answer 1

垂直对齐：中间;设置为<li>的{{1}}会做什么？的 DEMO

通过defaut，在基线上设置内联框。（display:inline-block;）

Answer 2

将班级.logo-container img设为display: inline-block;

您还可以将其设置为vertical-align:middle;或top;或bottom;，具体取决于您希望图像的位置。

可以将导航栏中的图像与菜单的其余部分垂直对齐

2 个答案: