So, I’ve been telling everyone how learning CSS is totally worth it and not as hard as it seems. But today I spent probably 2 hours trying to get one simple image vertically aligned without using a table. I should have just put in a table, but I’m crazy stubborn. I guess it was educational… The breakthrough was finding this site for vertical centering, but then I had a hard time making it center horizontally too. You can see the ultimate solution at Jonathan’s new website (just a forwarder right now, so the code is simple), but here it is for anyone searching. There are a zillion solutions out there, which SEEM to be collected at SuzyUK’s thread, but I couldn’t get any of those to work for me. I fully admit my approach to CSS still has a lot of superstition!
Style sheet:
<!--
body {
background-color: #000000;
margin: 0;
padding: 0;
}
#outer {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table;
}
#middle {
display: table-cell;
height: 540px;
vertical-align: middle;
text-align: center;
}
img {
border: 0;
margin: 1em auto;
}
-->
<!--[if IE]>
<mce:style type="text/css">
<!
#middle {
position: absolute;
top: 50%;
left: 50%;
height: auto
}
#inner {
position: relative;
top: -50%;
left: -50%;
}
-->
<!--[endif]-->
and the code:
<div id="outer"> <div id="middle"> <div id="inner"> <a href="http://home.epix.net/~hce/jhumor.html"> <img title="Click to enter" src="JCEcom.jpg" alt="Jonathan Caws-Elwitt, humorist and playwright" width="720" height="540" /> </a> </div> </div> </div>