Skip to main content

How to vertically align an image within a div with varying text length

Published on 28th December 2012

A while back I was building a web page from a mock up the designer had sent me. There were four sections each containing an image and a paragraph with varying text length. The image was vertically aligned in the middle of each section.

vertically align an image

It wasn't until I started coding this section that I realised it was quite tricky. Here is the solution I came up with.

.vertical-align-wrapper {
  position: relative;
  border: 2px dashed #b1424b;
  padding: 1em;
}
.vertical-align {
 margin: auto;
 position: absolute;
 top:0; bottom:0;
}
.vertical-align-wrapper p {
  margin-left: 170px;
  padding-left: 0.5em;
}

view demo