Question

如何在保留指定的填充尺寸的同时垂直对齐使用line-height的导航中的按钮？

我想将此按钮与其他导航元素对齐：

padding http://f.cl.ly/items/1y2Y2Y2X003E1L081q25/Screen%20Shot%202013-12-17%20at%207.50.02%20PM.png

我正在使用line-height来对齐其他人，但在按钮上使用line-height会产生不需要的结果：

line http://f.cl.ly/items/0T3V412M0s1z1N3O0i1W/Screen%20Shot%202013-12-17%20at%207.55.24%20PM.png

摘要：我将导航列表项目与line-height垂直对齐，但这会使我的按钮扩展导航栏的整个高度。我需要使用行高来将此ul与包含站点图标的另一个ul垂直对齐。使用的line-height高度是图标的高度。

请参阅此处重新创建的问题 fiddle

HTML：

<ul>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#" class="button">Text</a>

    </li>
</ul>

的CSS：

* {
    box-sizing: border-box;
}
ul {
    list-style: none;
    border: 1px solid;
    float: right;
    width: auto;
    height: auto !important;
    display: inline-block;
    margin: 0;
}
ul li {
    line-height: 103px;
    background: rgba(0, 0, 0, 0);
    text-transform: uppercase;
    float: left;
    margin: 0;
    padding: 0;
    direction: ltr;
}
ul li a {
    line-height: 103px;
    background: rgba(0, 0, 0, 0);
    text-transform: uppercase;
    padding: 0 15px;
    display: block;
    width: 100%;
}
.button {
    padding: 0.5em;
    background: grey;
}

Answer 1

简单的解决方法是将类应用于列（IE：<li class="button">）而不是链接：<a href="#" class="button">（请参阅edit here）

如果你不能这样做，你将不得不玩，高度和宽度样式，或创建一个div来使你的链接适合

编辑：通过将样式更改为padding:0 0.5em;，您将无法获得垂直位移

Answer 2

你可以vertically-align做

CSS：

div {
    height: 300px;
}
a {
    line-height: 300px;
}

将a放在div中，您应该全部设定。

Answer 3

在display:inline-block; vertical-align:middle标记中添加float:left而不是li

如何垂直对齐使用行高的导航中的按钮？

3 个答案: