CODEWITHSUNDEEP
htmlcss
Muhammad Mutahar Alam
Muhammad Mutahar Alam

Reputation: 163

Divs not aligning

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.

Upvotes: 1

Views: 66

Answers (2)

Himanshu Tanwar
Himanshu Tanwar

Reputation: 906

use float:left instead of display:inline-block and give the parent div some height.

Upvotes: 1

AppBroom
AppBroom

Reputation: 32

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;

Upvotes: 1

Related Questions