CSS
(This solution only works if the text being vertically centered is a single line.)
Start with your basic div:
<!DOCTYPE html>
<html>
<head>
<title>How to Create Transparency with CSS</title>
<style type=”text/css”>
div {width:300px; height:100px; background-color:#93b51b; color:#ffffff; border:1px solid #000000;}
</style>
</head>
<body>
<div>This is text inside a div.</div>
</body>
</html>
Let’s start the pretty-ing process by first centering the text horizontally:
<style type=”text/css”>
div {width:300px; height:100px; background-color:#93b51b; color:#ffffff; border:1px solid #000000; text-align:center}
</style>
Next, wrap the text in a paragraph (that’s our secret weapon):
<body>
<div><p>This is text inside a div.</p></div>
</body>
And finally, style the paragraph (this is where the magic occurs):
<style type=”text/css”>
div {width:300px; height:100px; background-color:#93b51b; color:#ffffff; border:1px solid #000000; text-align:center}
p {margin:0; line-height:100px;}
</style>
This is text inside a div.
Our final code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>How to Create Transparency with CSS</title>
<style type=”text/css”>
div {width:300px; height:100px; background-color:#93b51b; color:#ffffff; border:1px solid #000000; text-align:center}
p {margin:0; line-height:100px;}
</style>
</head>
<body>
<div><p>This is text inside a div.</p></div>
</body>
</html>
I have to admit, I always end up using a table instead. This makes it so much easier.
How the heck do I align it dynamically centered(vertically)
It may be easier to rely on vertical-align: middle. You should be able to do display: table-cell and make your div act as if it is a td element.
So your CSS would be:
div { display: table-cell; height: 100px; text-align: center; vertical-align: middle; width: 300px; }
@Aaron – I believe IE7 does not support that method.
Great Post, Thx! Thank you for sharing this!
Heres a cross browser solution: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html
I like that ~)
my regards..