CSS Verticle align middle

Previously we had to use <table>, <tr>, <td> tags to make the image or content vertically middle. But as the table structure is heavy compare to DIV based structure, we have to find alternative for making the content vertically middle. Believe making the content vertically middle is easily possible using only CSS! And it requires only 10 lines of CSS snippet.

HTML

Following HTML structure is needed to make it happen.

<div class="css-middle">
  <a href="#">
    <span></span>
    <img src="image.jpg" width="135" height="101" />
  </a>
</div>

The CSS3 supported browsers do not require span or any additional element. But IE (Internet Explorer) is an exception for that. <span> is used for example purpose, you can use <em>, <b> elements too.

CSS

First of all we will need the outline structure for an anchor. display: table-cell; and vertical-align: middle; CSS properties works well in non IE browsers. Although we have set the height and width. For IE we have to make every element vertical-align: middle; inside an anchor. Then for next span element we need to set its height to 100% an display property as inline-block specifically for IE. And we are done then!

.css-middle a{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 135px;
  height: 115px;
}
.css-middle a * {
  vertical-align: middle;
}
.css-middle a span {
  *display: inline-block;
  *height: 100%;
}

FINAL OUTPUT

You can specify padding, margin or borders as needed. If your content are dynamic then you can set the height and width dynamically easily for each parent as well as child element.