html/css 工具栏中垂直居中的元素

Question

我有两个按钮栏 - 每个按钮栏都包含链接，但其中一个还包含一个特定高度的提交按钮。带有提交按钮的所有元素都垂直居中。我希望另一个没有提交按钮的按钮栏看起来相同，所以我给了它一个明确的高度。但是，其中的链接与顶部而不是中间对齐。

这是怎么回事，如何制作高度一致且元素垂直居中的链接栏？

HTML：

<div class="link-bar">
    <input type="submit" value="Save"/>
    <a href="#">link</a>
    <a href="#">link</a>
</div>

<div class="link-bar">
    <a href="#">link</a>
    <a href="#">link</a>
</div>

CSS：

input[type='submit'] {
    width:100px;
    height:40px;
    border:solid red 1px;
}
.link-bar {
    height:40px;
    background:#EEE;
    border:blue 1px solid;
    margin:10px;
    vertical-align: middle;
}

请参阅 jsFiddle示例

Answer 1

只需添加等于高度的line-height即可。默认情况下，该行上的任何文本都将垂直居中。如果将文本换行，则会出现异常。

http://www.w3.org/wiki/CSS/Properties/line-height

我还删除了您的 vertical-align 因为它对于块级元素中的内容来说是多余的。 它仅适用于内联元素。

.link-bar {
    height: 40px;
    background: #EEE;
    border:blue 1px solid;
    margin: 10px;
}

.link-bar a {
    line-height: 40px; /* equal to the height of the container */
}

演示：

http://jsfiddle.net/SLqbk/9/

Answer 2

使用 line-height 属性。

.link-bar a {
    line-height: 40px;
}

http://jsfiddle.net/SLqbk/7/

Answer 3

将其添加到您的CSS

.link-bar a {line-height: 40px; }

http://jsfiddle.net/xYVRj/

Answer 4

我给了@Sparky672答案，因为他正确地解决了我的具体问题并引导我走上了正确的道路，但我想分享我最终所做的事情，我认为总体上更有效：

而不是明确设置 < 的行高code>.link-bar a 尝试匹配容器和按钮的高度，我只是将工具栏中的所有元素设置为相同的行高，并使它们 display:inline-bock。虽然使用 inline-block 的一般注意事项适用（请参阅 这里和此处)，最终结果是您在工具栏中放入的所有元素的大小一致且垂直居中，需要管理的 CSS 更少：

.link-bar * {
    line-height: 30px; 
    display:inline-block;
    /* Keep top-bottom padding of elements zeroed for consistent heights: */
    padding-top:0; padding-bottom:0; 
}

请参阅 更新了小提琴。