vertical-align can be applied to any inline element (span, a, img and notibly input to name a few). However the thing to remember is that it is in relation to the current height of the span which will be the height of the tallest bit of content (I think in theory you should be able to set a height with the height attribute, however that doesn't work in Firebird). It may be worth applying the vertical-align middle to all the items you want lined up.
This code gives some comparisons of the differing attributes (you will need to make a 16px square gif call 16px.gif and a 48px square gif called 48px.gif)
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Vertical Align Examples</title>
<style>
<!--
p {
font-size: 24px;
font-family: verdena, ariel, snas-serif;
border: 1px solid red;
padding: 0px;
}
p span {
font-size: 14px;
}
#vcentred span
{
vertical-align: middle;
font-size: 24px;
}
#vcentred #Bit2
{
font-size: 14px;
}
#vcentred image
{
vertical-align: middle;
}
-->
</style>
</head>
<body>
<h1>Vertical Align Examples</h1>
<p><strong>vertical-align: none</strong> This is the paragraph<img src="16px.gif" /><span>This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: baseline</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: baseline">This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: sub</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: sub">This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: super</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: super">This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: top</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: top">This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: text-top</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: text-top">This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: middle</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: middle">This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: bottom</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: bottom">This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: text-bottom</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: text-bottom">This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: 10px</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: 10px">This is the span</span><img src="48px.gif" /></p>
<p><strong>vertical-align: 25%</strong> This is the paragraph<img src="16px.gif" /><span style="vertical-align: 25%">This is the span</span><img src="48px.gif" /></p>
<h1>Vertical Centred text and Image</h1>
<p id="vcentred"><span>This is the paragraph</span><img src="16px.gif" /><span id="Bit2">This is the span</span><img src="48px.gif" /></p>
</body>
</html>
XHTML valid - absmiddle - value for CSS?
http://www.animesystem.com/temp/bad.gif
http://www.animesystem.com/temp/good.gif
Originally Posted by Solace D.
Bookmarks