63

i have problem with image vertical-align in 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;" to position image in center and that works. Also in tutorials i find many answers but they are not "useful", because all of my image are NOT at the same height!

aainaarz
  • 782
  • 1
  • 7
  • 14

3 Answers3

141

If you have a fixed height in your container, you can set line-height to be the same as height, and it will center vertically. Then just add text-align to center horizontally.

Here's 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;
}

The images will always be centered horizontally and vertically, no matter what their size is. Here's 2 more examples with images with different dimensions:

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

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

UPDATE

It's now 2016 (the future!) and looks like a few things are changing (finally!!).

Back in 2014, Microsoft announced that it will stop supporting IE8 in all versions of Windows and will encourage all users to update to IE11 or Edge. Well, this is supposed to happen next Tuesday (12th January).

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

With that being said, here's an updated way of aligning elements, both horizontally and vertically:

.container {
    position: relative;
}

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

Using this transform: translate(); method, you don't even need to have a fixed height in your container, it's fully dynamic. Your element has fixed height or width? Your container as well? No? It doesn't matter, it will always be centered because all centering properties are fixed on the child, it's independent from the parent. Thank you CSS3.

If you only need to center in one dimension, you can use translateY or translateX. Just try it for a while and you'll see how it works. Also, try to change the values of the translate, you will find it useful for a bunch of different situations.

Here, have a new fiddle: https://jsfiddle.net/Cthulhu/1xjbhsr4/

For more information on transform, here's a good resource.

starball
  • 20,030
  • 7
  • 43
  • 238
Cthulhu
  • 5,095
  • 7
  • 46
  • 58
  • sorry, but image height is not the same to all images! also width is not the same to all images, so i need margin-left and margin-right set to auto – aainaarz Apr 04 '12 at 10:21
  • But isn't height always the same for .img_thumb? – Cthulhu Apr 04 '12 at 10:24
  • div height in witch image is placed is 120px but image it self can have height max: 120px, and min: 1px (in theory). + this is meant to be gallery so one image is height 80px second 40px third 109px .. and so one! – aainaarz Apr 04 '12 at 10:30
  • this does not seem to work well if the image is larger than the bounding box. – Archimedes Trajano Apr 12 '13 at 05:31
  • 4
    The answer of Cthulhu is right, but if you check the pixels over and after the image you will notice that the div has an annoying padding top of 3 pixels (it depends on font size). To get rid of it simply add font-size: 0; to the div. – ragnar Jun 14 '13 at 16:43
  • Setting line-height of container and putting vertical-align attrib for image, worked. Thanks. – Hardik Jul 24 '13 at 09:41
  • 2
    This seemed like such a simple solution but I could not get it to work. After isolating each and every part of my wordpress template, I figured out my doctype was the problem. Switched from 4.0 Transitional to HTML5 doctype and this worked! Hopefully this will help others who may be running into the same problem – user1380540 Jan 20 '15 at 16:46
  • Actually the 2016 update worked great for modern browsers. I use a grid system so the cell height and width adjust to the layout meaning I don't always know the height. Using the transform: translate syntax worked out great when I applied it to a container div and then inside this div put another div that displayed an image (as background). – Trevor Jul 13 '16 at 22:25
  • **you are adding line-height:120px; that is not proper way.** – Sandeep Sherpur Dec 13 '19 at 07:14
39

Old question but nowadays CSS3 makes vertical alignment really simple!

Just add to the <div> this css:

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>
Jaqen H'ghar
  • 16,186
  • 8
  • 49
  • 52
  • Nice, should I be afraid using this if its really new? – MarksCode Jun 30 '16 at 03:21
  • @MarksCode it is already compatible with all modern browsers (IE11+) see [CanIUse](http://caniuse.com/#search=flexbox). It works in IE10 too with the [prefixed version](https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx) – Jaqen H'ghar Jun 30 '16 at 08:12
5

you don't need define positioning when you need vertical align center for inline and block elements you can take mentioned below idea:-

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 the demo:- http://jsfiddle.net/Ewfkk/2/

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35