1
<body>
   <div style="width:800px; height:500px; margin:0 auto; background-color: blue" >
      <div style="vertical-align:middle;"><img src="sl1.jpg" width="50%"></div>
   </div>
</body>

This code is not working... how do I align the image vertically?

Rob
  • 14,746
  • 28
  • 47
  • 65
jovanMeshkov
  • 757
  • 5
  • 12
  • 29
  • possible duplicate of [Vertically centering a div inside another div](http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div) – Gajus Dec 19 '14 at 12:42

1 Answers1

1

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7. Yours is the safer way to go for those. But since you tagged your question with CSS3 and HTML5 I was thinking you don't care.

Here is an example

Tested in:

FF3.5 FF4 Safari 5 Chrome 11 & 12 IE9 HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

div.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

div.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: left;
}
Daniele
  • 11
  • 1