How to center vertical children inside a div

Question

Possible duplicate:
How to make the center of the image (vertically and horizontally) inside a larger div

HTML code:

<div class="promo_tumbs col_12"> <div class="promo_tumb"></div> <div class="promo_tumb"></div> <div class="promo_tumb"></div> <div class="promo_tumb"></div> <div class="promo_tumb"></div> </div> 

CSS part:

 .promo_tumbs { height: 155px; background: #058; } .promo_tumb { height: 75px; width: 125px; background: #990000; float: left; margin: 0 10px; text-align: center; } 

How can I vertically center .promo_tumb ?

Answer 1

Read this article on vertical centering.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

If you do not want to support IE7 or less, you can use vertical-align : middle .

Otherwise:

• Set display to table in .promo_tumbs col_12
• Set vertical-align to middle and display to table-cell for .promo_tumb

and it should work.

Answer 2

Are heights always fixed ( 155px and 75px )? In this case, it will be as simple as changing the .promo_tumb token:

 margin: 40px 10px 

Answer 3

use vertical-align: middle; in css / style for promo_thumbs.

Answer 4

 css part insert in head section.......... <style type="text/css"> .promo_tumbs {height: 155px; background: #058; } .promo_tumb {height: 75px; width: 125px; background: #990000; float: left; margin: 40px 50px; text-align: center; } </style> 

body part coding ......

  <div class="promo_tumbs col_12"> <div class="promo_tumb"></div> <div class="promo_tumb"></div> <div class="promo_tumb"></div> <div class="promo_tumb"></div> <div class="promo_tumb"></div> </div> 

Answer 5

 .promo_tumbs {height: 155px; background: #058; vertical-align: middle; display:table-cell; }