Why aren't the divs inside #inner vertically aligning? It's important to note that I am using IE 8 and CSS, not CSS3, in case that matters. Here is my HTML:
<div class="Content">
<div id="home">
<div id="inner">
<div id="stuff">HeadingOne</div>
<div>HeadingTwo</div>
<div>HeadingThree</div>
</div>
</div>
</div>
This is my CSS:
#inner div {
display: inline;
}
#home #inner {
margin: 0px auto;
vertical-align: middle;
}
#home {
display: table-cell;
vertical-align: middle;
text-align:center;
}
I've tried using display: table-cell; and then vertical-align: middle, but it didn't work. Any ideas why? I specifically need the '#inner div' displays to be inline. I want the three divs inside #inner to be inline and in the center of Content.