無法垂直居中對齊浮動元素

Question

在​​中，我無法垂直居中對齊頂部欄上浮動的撤銷/重做元素。

我試過vertical-align: middle也玩過line-height但我沒有得到想要的效果。

我錯過了什麼？

jsFiddle

Answer 1

一種解決方案是使用display: table和display: table-cell到位浮動的，然後使用vertical-align: middle;

Have a fiddle!

1. #bar有display: table
2. h4和#actions被視爲 「表格單元格」

HTML

<div id="bar"> 
    <h4>Tasks</h4> 
    <span id="actions"> 
     <input type="image" id="undo" src="http://i.imgur.com/fyCSlvW.png" disabled /> 
     <input type="image" id="redo" src="http://i.imgur.com/BshzaCg.png" disabled /> 
    </span> 
</div> 

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-family:"Arial"; 
    font-size: 62.5%; 
} 
#actions button { 
    background: none; 
    border: 0rem; 
} 
#actions button input { 
    outline: none; 
} 
#bar { 
    background-color: #4196C2; 
    display: table; 
    width: 100%; 
} 
h4 { 
    text-decoration: none; 
    display: table-cell; 
    vertical-align: middle; 
    margin-top: 2rem; 
    /* = 20px */ 
    color: white; 
    padding: 20px; 
    font-size: 1.8rem; 
} 
#actions { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
} 

Answer 2

添加在div一個邊距，做它用百分比例​​如

#bar 
{ 
margin-top: 5%; 
} 

Answer 3

這裏的JsFiddle

h4{ 
    text-decoration: none; 
    display: inline-block; 
    /* margin-top: 2rem;   = 20px */ 
    color: white; 
    margin-left: 1.5rem; 
    font-size: 1.8rem; 
    line-height: 15px; 

} 

我已經給元素欄中的最小高度併爲h4刪除保證金頂部並添加了行高

Answer 4

您還沒有設置包含兩個按鈕的跨度。 添加以下內容：

#actions { 
    display: block; 
    margin: 0 0 0 0; 
    padding: 15px 0 0 0 
} 

在這裏你去：http://jsfiddle.net/csTS7/151/