工具欄中的垂直居中元素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等於height。默認情況下，該行上的任何文本都將垂直居中。如果將文本換行到新行，則會發生異常。

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

我也刪除您vertical-align，因爲它是多餘的塊級元素的內容。 It only applies to inline elements。

.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 */ 
} 

DEMO：

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的行高以嘗試匹配容器和按鈕高度，我只是將工具欄中的所有元素設置爲相同的行高，並將它們設置爲display:inline-bock。當使用inline-block的應用的正常警告（見here和here），最終的結果是一致的大小和垂直居中所有您在工具欄上扔，以較少的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; 
} 

見updated fiddle。