Vertically Aligning Block Element to Image

How to vertically align an image inside a div

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {    height: 25px;      /* Equals maximum image height */    width: 160px;    border: 1px solid red;    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
    text-align: center;    margin: 1em 0;}
.helper {    display: inline-block;    height: 100%;    vertical-align: middle;}
img {    background: #3A6F9A;    vertical-align: middle;    max-height: 25px;    max-width: 160px;}

<div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Vertically align an image inside a div with responsive height

Here is a technique to align inline elements inside a parent, horizontally and vertically at the same time:

Vertical Alignment

1) In this approach, we create an inline-block (pseudo-)element as the first (or last) child of the parent, and set its height property to 100% to take all the height of its parent.

2) Also, adding vertical-align: middle keeps the inline(-block) elements at the middle of the line space. So, we add that CSS declaration to the first-child and our element (the image) both.

3) Finally, in order to remove the white space character between inline(-block) elements, we could set the font size of the parent to zero by font-size: 0;.

Note: I used Nicolas Gallagher's image replacement technique in the following.

What are the benefits?

• The container (parent) can have dynamic dimensions.

• There's no need to specify the dimensions of the image element explicitly.

• We can easily use this approach to align a <div> element vertically as well; which may have a dynamic content (height and/or width). But note that you have to re-set the font-size property of the div to display the inside text. Online Demo.

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

The output

Responsive Container

This section is not going to answer the question as the OP already knows how to create a responsive container. However, I'll explain how it works.

In order to make the height of a container element changes with its width (respecting the aspect ratio), we could use a percentage value for top/bottom padding property.

A percentage value on top/bottom padding or margins is relative to the width of the containing block.

For instance:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Here is the Online Demo. Comment out the lines from the bottom and resize the panel to see the effect.

Also, we could apply the padding property to a dummy child or :before/:after pseudo-element to achieve the same result. But note that in this case, the percentage value on padding is relative to the width of the .responsive-container itself.

<div class="responsive-container">
  <div class="dummy"></div>
</div>

.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Demo #1.

Demo #2 (Using :after pseudo-element)

Adding the content

Using padding-top property causes a huge space at the top or bottom of the content, inside the container.

In order to fix that, we have wrap the content by a wrapper element, remove that element from document normal flow by using absolute positioning, and finally expand the wrapper (bu using top, right, bottom and left properties) to fill the entire space of its parent, the container.

Here we go:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Here is the Online Demo.

---

Getting all together

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="Sample Image">
  </div>
</div>

.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Here is the WORKING DEMO.

Obviously, you could avoid using ::before pseudo-element for browser compatibility, and create an element as the first child of the .img-container:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="Sample Image">
</div>

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

UPDATED DEMO.

Using max-* properties

In order to keep the image inside of the box in lower width, you could set max-height and max-width property on the image:

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

Here is the UPDATED DEMO.

vertical alignment of block element

Here we go ... just let the image be an image (inline) and add this to your .myContainer

display: table-cell;
text-align: center;
vertical-align: middle;

Sample snippet

.myContainer {  width: 100px;  height: 100px;  background-color: lightblue;  display: table-cell;  text-align: center;  vertical-align: middle;}
.myImage {  width: auto;  max-width: 20px;  height: auto;  max-height: 22px;  border: 1px solid lightslategrey;}

<div class='myContainer'>  <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'></div>

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

vertical-align image in div

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.

Happy coding.

How to vertically align image?

You did it on the left side. You just have to repeat it but the right side!

I copied the code that is for the left side and just added style ="left: 0;" on element class="logo-content-block"

div.logo-content-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #577fa1;
    z-index: 1;
}

div.logo-content-block {
    background: #f3f2f0;
    width: 80%;
    height: 60%;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0, -50%);
}

div.content-description {
    padding-left: 50px;
    padding-right: 50px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

div.logo-content-background2 {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
    background-color: #f3f2f0;
    z-index: 2;
}

div.logo-content-background2 div.logo-content-block {
    background: url('http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg') no-repeat;
    background-size: cover;
    background-position: center center;
}

<div class="logo-content-background">
    <div class="logo-content-block">
        <div class="content-description">
            <h3>
                CLIF Bar
            </h3>
            <p>
                CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable
                ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a
                150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your
                adventure going.
            </p>
        </div>
    </div>
</div>
<div class="logo-content-background2">
    <div class="logo-content-block" style="left: 0;">
        <div class="content-description">

        </div>
    </div>
</div>

Vertical-Align a Block Element

You can use table and table-cell: And move your class='title' inside img-holder

Fiddle

With padding left away from image - fiddle

.title-block {
    width:272px;
    height: 110px;    
}

.img-holder {    
    margin: 0 6px 0 0;
    position: relative;
    display: table;
}

img, .title{
    display:table-cell;
    vertical-align: middle;
}
.title {
    text-transform: uppercase;
    margin: 8px 0 9px;  
}

How to vertically align images and text with display:inline-block?

I might try a more css oriented approach. I made a small example below.

.btnStyle {
  position: relative;
  display: inline-flex;
  width: 110px;
  height: 24px;
  text-align: left;
  font-family: Helvetica, sans-serif;
  color: black;
  background-image: url(https://extortionguild.com/images/icon-unsorted.png);
  background-size: 17.5px 100%;
  background-position: right center;
  background-repeat: no-repeat;
  margin-right: 20px;
}

table {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% - 20px);
  font-size: 18px;
}

table td {
  vertical-align: middle;
}

<div style="display:inline-block; width: 100% height: 40px;">

  <div class="btnStyle"><!-- Button 1-->
    <table>
      <tr>
        <td>
          Text here
        </td>
      </tr>
    </table>
  </div>

  <div class="btnStyle"><!-- Button 2-->
    <table>
      <tr>
        <td>
          Text here
        </td>
      </tr>
    </table>
  </div>

  <div class="btnStyle" style="width: 200px;"><!-- Button 3 - wider-->
    <table>
      <tr>
        <td>
          Even More Text here
        </td>
      </tr>
    </table>
  </div>

</div>

---

Related Topics