...
PDA

DIV / CSS Question

dlg0351
04-27-2006, 11:51 PM
I am trying to recreate the following html code without using a table. I just want to use a div and css. I cannot get the text to align vertically in the middle. How can I do this? Any help is greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title></title>

<style>
<!--
div.red {
width: 150px;
height: 150px;
background-color: #FF0000;
text-align: center;
vertical-align: middle;
}
-->
</style>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" width="150" height="150">
<tr>
<td bgcolor="#FF0000" valign="middle" align="center">Hello</td>
</tr>
</table>

<br /><br />

<div class="red">Hello</div>

</body>
</html>
Arbitrator
04-28-2006, 12:07 AM
First, this isn't a JavaScript question. It should be in the HTML/CSS forum.

Second, to get that effect you need to use display: table-cell; on the div then vertical-align: middle; should work. However, Internet Explorer doesn't support this property and isn't expected to in their next browser release so to get what you want you're unfortunately probably going to have to rely on hacks.

Third, the deprecated border, cellpadding, cellspacing, width, height, bgcolor, valign, and align attributes aren't valid in XHTML. Use CSS border-width, padding, border-collapse, width, height, background-color, vertical-align, and text-align properties, respectively, instead.
Kravvitz
04-28-2006, 03:15 AM
Don't make a common newbie mistake -- the point of table-less layouts is not to simply replace tables with <div> elements. The point is to use semantically correct markup and then use CSS to make it look the way you want it to.

Center Page Content Horizontally and Vertically (without <table>s) (http://www.dynamicsitesolutions.com/css/center_page_content_horizontally_and_vertically/)
Center Page Content Horizontally and Vertically (with a <table>) (http://www.dynamicsitesolutions.com/html/center_page_content_horizontally_and_vertically/)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum