Div未对齐

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显示div：inline-block; ？如果是这样，你可以尝试将其添加到所有三个div：

vertical-align：middle;

否则用另一个div包装所有三个div并将父显示为表

display：table;

然后将所有三个子div显示为表格单元格并垂直对齐它们：

显示：table-cell; vertical-align：middle;

Answer 2

使用float：left而不是display：inline-block并给父div一些高度。