Table cell doesn't obey vertical-align CSS declaration when it contains a floated element
Posted
by mikez302
on Stack Overflow
See other posts from Stack Overflow
or by mikez302
Published on 2010-04-14T22:55:09Z
Indexed on
2010/04/14
23:13 UTC
Read the original article
Hit count: 335
css
I am trying to create a table, where each cell contains a big floated h1 on the left side, and a larger amount of small text to the right of the big text, vertically centered.
However, the small text is showing up at the top of each cell, despite that it has a "vertical-align: middle" declaration. When I remove the big floated element, everything looks fine. I tested it in recent versions of IE, Firefox, and Safari, and this happened in every case.
Why is this happening? Does anyone know of a way around it? Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>vertical-align test</title>
<style type="text/css">
td {
border: solid black 1px; vertical-align: middle; font-size: 12px}
h1 {
font-size: 40px; float: left}
</style>
</head>
<body>
<table>
<tr>
<td><h1>1</h1>The quick brown fox jumps over the lazy dog.</td>
<td>The quick brown fox jumps over the lazy dog.</td>
</tr>
</table>
</body></html>
Notice that the small text in the first cell is at the top for some reason, but the text in the 2nd cell is vertically centered.
© Stack Overflow or respective owner
