Simple … Very Simple DIV vertical alignment
OH MY DEAR !!
I have spent countless hours in the past trying to figure out how to vertically align the contents of a DIV element using CSS… I am a CSS noob of sorts. I know the syntax but I don't know all the hacks and tricks.
So here's how:
HTML:
<div class="navigation_tile">
<div>
<img src="@Url.Content("~/Content/images/nav_tile.png")" alt="View" title="View" />
</div>
</div>
CSS:
.navigation_tile
{
background-image:url(images/nav_tile.png);
background-position:bottom;
background-repeat:repeat-x;
height:49px;
}
.navigation_tile div
{
height:49px;
width:54px;
vertical-align: middle;
display:table-cell;"
}
Why Does This Work?
Simple explanation is that vertical-align:middle only works for <td> elements. There's a whole inline element discussion I could get into but you don't give a shit.
Setting the inner div(s) to have a display:table-cell will make it so that vertical-align works since it will be treated as a table cell.
The reason you need an inner div is because you don't want the container div behaving like a table cell. That screws all sorts of crap up.
