Printable View
How exactly do i use this CSS property?
vertical-align
I tried something like
<div style=" height:100px ; vertical-align:middle ">
text here
</div>
But the text was still on top.
--------------------
http://www.geocities.com/machinegunsg/
CastleVania : Messing Up Dracula's Turf
vertical-align only aligns INLINE elements, and table cells. A <div> is a block-level element. You can do something like this:
Which will give the appearance of vertically aligning your <div> to the middle, but it's really just an equal amount of top and bottom padding.Code:<div style="padding: 45px 0; font-size: 10px;">
text here
</div>
eom
Hi,I know Vinnie has explained this already (and it won't help with you particular problem) but I thought it was worth an example for those who are still not sure what vertical_align does[img]images/smilies/wink.gif[/img].Quote:
How exactly do i use this CSS property?
As mentioned by Vinnie vertical-align determines the alignment of text within a single line of text or within a table cell.
(In a table cell the middle of the element will align with the middle of the cell.)
When used in a line of text vertical-align will position the text with respect to other text on the same line.
This inline layout model is quite complicated but this is the basics of it: For each piece of text an inline box is generated, using the content area (box defined by font-size for each piece of text) and the half leading ((font size -line height)/2) to arrive at it's final height. These boxes will always be centred vertically with respect to each other within the line unless another value is applied to vertical-align.
Perhaps an example would be easier to explain it:Some browers may not support all the values of vertical-align so testing is necessary.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline layout model</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.test {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.test span {
font-size:12px;
vertical-align:bottom
}
.test em {
font-size:8px;
vertical-align:top
}
-->
</style>
</head>
<body>
<div class="test">
<p>Hello this is normal text <span>This text is lower down</span><em> and this text is higher up</em></p>
</div>
</body>
</html>
(Hope this is useful to someone.)
Paul
Ok...
Thanks guys...
Is there anyway to replicate this?
<td valign="middle">
Because i thought having a specified height and middle text makes for a good decoration when used with { background-image }......
Hi,
YesQuote:
Is there anyway to replicate this?
<td valign="middle">
But I don't think that was what you meant :). I assume you meant without tables.Code:<td style="vertical-align:middle">
Vinnie has given an easy solution above by just using padding to push your text down. There is also a command "display:table-cell" which will make an element behave like a table cell and allow vertical-align:middle to work. However it is not very well supported (IE doesn't support it so its not much use).
Paul
Well, IE supposedly supports it when it treats a document as XML, but not as HTML.Quote:
Originally Posted by Paul O'B
Thanks guys.
Well, looks like i have to drop my ideas......