Divs not aligning

Question

I have 3 simple divs with some cosmetic styles that are supposed to be aligned in a row, Two of them have images that are on the left and right sides while middle one contains another div containing text.

I am able to fit the image in divs but the middle one that contains text is not aligning horizontally with other two.

Following is the 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>

Here is the jsfiddle link or that http://jsfiddle.net/4bg7uyoj/1/

Please help in aliging all the divs.

Thanks in advance.

Answer 1

are you displaying the divs using display: inline-block; ? If so you could try adding this to all three divs:

vertical-align: middle;

Otherwise wrap all three divs with another div and display the parent as a table

display: table;

Then display all three child divs as table cells and verticall align them:

display: table-cell; vertical-align: middle;

Answer 2

使用float：left代替display：inline-block并为父div设置一些高度。