Hi,
I'd like to have a single block of text on a page, centered vertically and horizontally. (using css)
The last part is easy: text-align: center;
but the vertical centering is eluding me. Can anyone help?
So far I haven't been able to vertically center anything...
current code (index.html) :
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="test.css" />
<title>
CSS test
</title>
</head>
<body>
<div class="centerthis">
Centered text
</div>
</body>
</html>
css:
PHP Code:
body {
min-height: 100%;
min-width: 100%;
vertical-align: middle;
}
.centerthis {
text-align: center;
width: 100%;
height: 100%;
vertical-align: middle;
font-weight: bold;
}
The text is displayed bold and horizontally centered so the CSS is included and parsed correctly.
Any tips (on this and CSS general) greatly appreciated!