股利未對齊

Question

我有3個簡單的div，其中一些裝飾樣式應按行對齊，其中兩個的圖像左右兩側，中間的一個包含另一個包含文本的div。

我可以使圖像適合div，但包含文本的中間一個不能與其他兩個水平對齊。

以下是html

 <div class="eggpic">
    <img src="smiley.gif"/>
 </div>
 <div class="timersection">
   <div class="timersectiontext">Hello</div>
 </div>
 <div class="buttonpic softboil">
   <img src="smiley.gif"/>
  </div>

這是jsfiddle鏈接或http://jsfiddle.net/4bg7uyoj/1/

請協助所有div。

提前致謝。

Answer 1

您是否使用display：inline-block;顯示div？ ？ 如果是這樣，您可以嘗試將其添加到所有三個div中：

垂直對齊：中間；

否則，將所有三個div換成另一個div，然后將父級顯示為表格

顯示：表；

然后將所有三個子div顯示為表格單元格並垂直對齊它們：

顯示：表格單元格； 垂直對齊：中間；

Answer 2

使用float：left代替display：inline-block並為父div設置一些高度。