Is there a way?
div - span style text-align: vertical [text here] - /span - /div
doesnt want to work
Printable View
Is there a way?
div - span style text-align: vertical [text here] - /span - /div
doesnt want to work
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.
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.
I have some other methods in some very old demos here and here for vertical centering also.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>
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?
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).
No you would use vertical align in this case as they are all inline elements (although some browsers can be awkward with this of course).Quote:
Originally Posted by cranium
They are covered in the links I have shown above.:)Quote:
and what if u want to vertically center a block of text? or an image?
Or some other methods here:
http://www.pmob.co.uk/temp/vertical-align-examples.htm
http://www.pmob.co.uk/temp/vertical-align11.htm
http://www.pmob.co.uk/temp/vertical-align3.htm
There is also an entry in the faq on centering :)