工具栏中的垂直居中元素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的{​​{1}}即可。默认情况下，该行上的任何文本都将垂直居中。如果将文本换行到新行，则会发生异常。

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

我还删除了您的height，因为它对于块级元素中的内容来说是多余的。 It only applies to inline elements

vertical-align

<强>样本：

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答案，因为他正确地解决了我的具体问题并引导我走上了正确的道路，但我想分享我最终做的事情，我认为总体上更有效：

我没有明确设置.link-bar a的行高以尝试匹配容器和按钮高度，而是将工具栏中的所有元素设置为相同的行高，并将它们设为{{ 1}}。虽然使用内联块的常规警告适用（请参阅here和here），但最终结果是您在工具栏中抛出的所有元素的一致大小和垂直居中，需要管理的css较少：

display:inline-bock

请参阅updated fiddle。