Question

我正试图用我的徽标垂直居中我的文字。当我使用线高时，它也会提升我的徽标。我怎么才能提高文字，使其垂直居中于我的徽标？这是我的代码。

HTML

<div id="wrapper">
    <div id="header">
        <div id="nav">
        <ul>
            <li> dfgkdfjg </li>
            <li><img src="http://i.imgur.com/d0umnxt.png" /></li>
            <li> pfopkp </li>
        </ul>
        </div>
    </div>
</div>

CSS

body {
    margin: 0px;
}

#header {
    display: table;
    width: 100%;
    height: 100px;
    background-color: #151B1F;
}
#nav {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

#nav li {
    margin-left: 50px;
    margin-right: 50px;
    display:inline;
}

Answer 1

尝试垂直对齐图像而不是文本：

#nav img {
    vertical-align: middle;
}

这将完成这项工作。

Answer 2

实际上你正试图调整会给你带来麻烦的文字;而不是对齐文本尝试对齐图像...

在你的css中添加这个

#nav img {
    vertical-align: middle;
}

以下是工作示例Link。

线高不能正常工作

2 个答案: