When trying to center an element both vertically and horizontally, everything seems to be working correctly except for one issue I'm facing in IE7. I am able to center an img vertically but not a div. What style is being applied by IE to the image that is not being applied to the div?
HTML
<!-- Image - working correctly -->
<div class="container">
<img class="inner" src="http://placekitten.com/200/200?image=2" />
</div>
<br/>
<!-- Div - not working (aligned to top) -->
<div class="container">
<div class="inner">123</div>
</div>
CSS:
.container {
height: 300px;
background: #EEE;
text-align: center;
line-height: 300px;
}
.inner { vertical-align: middle; width: 100px;
height: 100px; background:red; display: inline-block; line-height: 1.3; }​
Fiddle:
Also:
- I am uncertain about the size of the DIV
- I can utilize JavaScript, however, I cannot determine the size of the DIV as it contains dynamic content
Thank you!