Need some help with { vertical-align }

**mcg_sg** · Sep 15, 2003 08:21

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

**vgarcia** · Sep 15, 2003 08:23

vertical-align only aligns INLINE elements, and table cells. A <div> is a block-level element. You can do something like this:

Code:

<div style="padding: 45px 0; font-size: 10px;">
text here
</div>

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.

**Karst** · Sep 15, 2003 08:25

eom

**Paul O'B** · Sep 15, 2003 09:40

Hi,

How exactly do i use this CSS property?

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].

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:

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>

Some browers may not support all the values of vertical-align so testing is necessary.

(Hope this is useful to someone.)

Paul

**mcg_sg** · Sep 15, 2003 20:02

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 }......

**Paul O'B** · Sep 16, 2003 02:24

Hi,

Is there anyway to replicate this?
<td valign="middle">

Yes

Code:

<td style="vertical-align:middle">

But I don't think that was what you meant

. I assume you meant without tables.

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