Question

我尝试创建一个包含五个列表项的简单导航。所有这些都是20％的宽度。有两个项目包含文本，一个居中项目包含站点徽标作为图像，然后另外两个列表项目包含文本。

我的问题是，当我在第三个项目中有一个图像时，周围列表项目中的文本会被降低。我无法看到任何利润或任何对他们采取任何行动或任何理由，为什么会发生这种情况，无论我尝试什么，它似乎都无法发挥作用。

非常感谢任何想法或解释：）！

HTML

<div class="navigation">
    <div class="container">
        <ul>
            <li><a href="/">Home</a></li><!--
            --><li><a href="/">Categories</a></li><!--
            --><li><img src="http://www.placehold.it/140x64"></li><!--
            --><li><a href="/">Contact</a></li><!--
            --><li><a href="/">Personalise</a></li>
        </ul>
    </div>
</div>

CSS

.navigation {
    top: 0;
    width: 100%;
    height: 64px;
    position: fixed;
    background: #ffffff;
    border-bottom: 1px solid #dfdfdf;
}

.navigation .container {
    width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}

.navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.navigation li {
    width: 20%;
    height: 64px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
}

Answer 1

在.navigation li规则中添加或替换此CSS属性：

display: table-cell;
vertical-align: middle;

Example

列出出现在包含图像的其他列表项下面的项目

1 个答案: