I was trying to align some text to an image vertically. I used the align attribute like this:
<img height=”28″ src=”/images/connect-phone.gif” width=”26″ align=”middle”> 234-234-2342
But this didn’t work in Firefox or Safari. So I sought out the CCS alternative. I came across this article explaining how to do it: http://www.webmasterworld.com/forum83/6588.htm . Here is the code supplied to answer the same question I had:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Strict//EN”
“http://www.w3.org/TR/html4/strict.dtd”><html>
<head>
<title></title>
<style type=’text/css’>
body, html {
height:100%; /*fill the viewport*/
}
#container{
height:100%; /*fill the body*/
text-align: center; /*H-centering in early IE versions*/
}
#pinac {
width: 826px;
height: 155px;
position:relative; /*allows for top property to move the element*/
top:50%; /*moves it 50% of #container’s height down the page*/
margin-top:-77px; /*pulls it back up by half it’s height*/
margin-left: auto;margin-right: auto; /*H-centering in complaint browsers*/
background:#369;
color:#fff;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”pinac”>This is your element.</div>
</div>
</body>
</html>
You’ve got to be kidding! Forget that. Instead I found I could just set align=”absmiddle” in the image. This attribute solved my problem, like this:
<img height=”28″ src=”/images/connect-phone.gif” width=”26″ align=”absmiddle”> 234-234-2342
I know CSS has it’s place but I’m still not much of a fan.