Vertical image alignment in div

Question

I have a problem with vertically aligning the image in a div

.img_thumb { float: left; height: 120px; margin-bottom: 5px; margin-left: 9px; position: relative; width: 147px; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; } .img_thumb img { display: block; margin-left: auto; margin-right: auto; vertical-align: middle; } <div class="img_thumb"> <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a> </div> 

As far as I know, I need "display: block;" position the image in the center and what works. Also in the textbooks I find many answers, but they are not "useful" because all my images are NOT at the same height!

Answer 1

If you have a fixed height in your container, you can set the line height as well as the height, and it will be centered vertically. Then just add the horizontal alignment of the text.

Here is an example: http://jsfiddle.net/Cthulhu/QHEnL/1/

EDIT

Your code should look like this:

 .img_thumb { float: left; height: 120px; margin-bottom: 5px; margin-left: 9px; position: relative; width: 147px; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; line-height:120px; text-align:center; } .img_thumb img { vertical-align: middle; } 

Images will always be centered horizontally and vertically, regardless of their size. Here are two more examples with images of different sizes:

http://jsfiddle.net/Cthulhu/QHEnL/6/

http://jsfiddle.net/Cthulhu/QHEnL/7/

UPDATE

Now in 2016 (the future!) And it looks like several things are changing (finally!).

In 2014, Microsoft announced that it would no longer support IE8 in all versions of Windows and would encourage all users to upgrade to IE11 or Edge. Well, this is due to happen next Tuesday (January 12th).

Why does it matter? With the declared death of IE8, we can finally start using CSS3 magic.

With that said, an updated way to align elements both horizontally and vertically:

 .container { position: relative; } .container .element { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 

Using this method transform: translate(); You don’t even need to have a fixed height in your container, fully dynamic . Does your item have a fixed height or width? Is your container also? No? It does not matter, it will always be centered, because all the centering properties are fixed on the child, regardless of the parent. Thanks CSS3.

If you only need to center in one dimension, you can use translateY or translateX . Just try for a while and you will see how it works. Also, try changing the translate values, you will find this useful for several situations.

There is a new fiddle here: https://jsfiddle.net/Cthulhu/1xjbhsr4/

For more information on transform , here is a good resource .

Happy coding.

Answer 2

An old question, but now CSS3 makes vertical alignment really easy!

Just add this css to the <div> :

 display:flex; align-items:center; justify-content:center; 

---

Jsfiddle demo

Live example:

 .img_thumb { float: left; height: 120px; margin-bottom: 5px; margin-left: 9px; position: relative; width: 147px; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; display:flex; align-items:center; justify-content:center; } 

 <div class="img_thumb"> <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images"> <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" /> </a> </div> 

Answer 3

you do not need to determine the positioning when you need a center of vertical alignment for inline and block elements, which you can use below: -

 inline-elements :- <img style="vertical-align:middle" ...> <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span> block-elements :- <td style="vertical-align:middle"> ... </td> <div style="display:table-cell; vertical-align:middle"> ... </div> 

see demo: - http://jsfiddle.net/Ewfkk/2/