CODEWITHSUNDEEP
htmlcssimagevertical-alignment
sbgib
sbgib

Reputation: 5828

Issue with vertically aligning image in div

I am aware there are multiple ways of vertically aligning an image in a div, as pointed out here already: How to vertically align an image inside div

Still, from my own testing, I'm curious as to why the below does not seem to middle align when pasted into a .htm file and opened in Chrome 39 or IE 11, but works just fine in JSFiddle: http://jsfiddle.net/4RPFa/6908/

Is there something entirely obvious which I'm missing?

Thanks. 

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div style="height: 300px; line-height: 300px;background-color:green;"> 
      <img width="70" height="70" style="vertical-align:middle; background-color:blue;" alt="" src="image.png">
    </div>
  </body>
</html>

Upvotes: 1

Views: 110

Answers (2)

Alin
Alin

Reputation: 1228

The best way I used to align vertically is 

position:absolute;
top:0;
bottom:0;
margin:auto;

It will work in IE (even 8 and 7) and stuff, why not try this ?

If you want absolute center, just use

position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

..and this will do the trick

PS: Someone asked why this is the best way, didn't get the chance to see who it was, the question was deleted rapidly...my answer is simple, I never encountered any odd behaviour or anomalies with this method, so, FOR ME, this is a simple, easy and basic way of doing it, therefore, the best.

Upvotes: 1

Zack Tanner
Zack Tanner

Reputation: 2590

In this specific case, the reason it renders differently outside of fiddle is due to the fact that they are using <!DOCTYPE html>, whereas you are using <html> (quirks mode). Feel free to try it.

You can read more about the oddities of quirks mode here: http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Upvotes: 1

Related Questions