Making a text vertical aligned in a DIV

Recently in my project I had to implement one page in which an image and the related text had to be shown side by side using the DIV tags, where the text needed to be centered vertically with respect to the image.

Example : Let’s take a scenario where we cannot use vertical-align with DIV to display the text in center adjacent to the image.

Here we are having an unordered-list having 2 DIV components containing an image and text respectively.

[html]

<ul><li>

<div class="image"></div>

<div class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</li></ul>

[/html]

To make the DIV adjacent to each other we have applied the following CSS. But still it does not solve our use case to centrally align the text in DIV as specified above.

[css]

ul{ list-style:none; margin:0px;}

ul li{  margin-bottom:20px;}

ul li .image{ border:1px solid #666; height:100px; width:100px; float:left; margin-right:10px;}

ul li .details{  color:#000;  font-size:14px; min-height:100px; }

ul li .details p{ margin:0px;}

[/css]

Here is the output of the above CSS. The text will start from top of the DIV and will be displayed as follows:

If we want the text to be centrally aligned in the text DIV, you need to do the following steps:

1. Add following CSS property display:table to the LI element.
2. Then you need to add CSS properties display:table-cell;  vertical-align:middle;  to the class named ‘details’ which is applied on DIV containing text.

[css]

ul li{  margin-bottom:20px; display:table;}

ul li .details{ display:table-cell; vertical-align:middle; color:#000;  font-size:14px; min-height:100px; }

[/css]

After applying this CSS to your HTML, your output will look like this :

Hope it helps. 🙂

Regards.
Rajan Shergill
rajan@intelligrape.com