vertical align text, inside div

**JREAM** · Sep 5, 2007 12:36

Is there a way?

div - span style text-align: vertical [text here] - /span - /div

doesnt want to work

**CraniumDesigns** · Sep 5, 2007 12:41

the vertical-align property i believe only aligns inline elements like text, images, and form elements TO EACH OTHER. i too would like to know how to center something vertically.

**Paul O'B** · Sep 5, 2007 15:32

Hi,

If you want to align some text that isn't going to wrap then you simply set the line-height to the same height as the div and it will sit in the centre automatically.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0;padding:0}
.test{
    width:200px;
    height:200px;
    line-height:200px;
    text-align:center;
    margin:200px;
    border:1px solid #000;
}
</style>
</head>
<body>
<div class="test">
    <p>I'm in the center!</p>
</div>
</body>
</html>

I have some other methods in some very old demos here and here for vertical centering also.

**CraniumDesigns** · Sep 5, 2007 15:56

cool. so is that how u line up form elements too? by setting them all with the same line height?

and what if u want to vertically center a block of text? or an image?

**Dan Schulz** · Sep 5, 2007 17:52

Well, in theory you could set the relative position of the DIV's container, then position that DIV absolutely (top left both zero), then set the top and left negative margins to half the height and width of the container, but the code for that wouldn't be pretty.

Or maybe I'm thinking of something else entirely while trying to update Windows on this PC (had to do a clean install on a new hard drive).