All geek questions in one place

A table cell does not obey a vertical-aligned CSS declaration when it contains a floating-point element

I am trying to create a table in which each cell contains a large floating h1 on the left side and more small text to the right of the large text with a vertical orientation.

However, small text is displayed at the top of each cell, even though it has a vertical alignment: medium ad. When I delete a large floating element, everything looks great. I tested it in the latest versions of IE, Firefox, and Safari, and this happened in every case.

Why is this happening? Does anyone know about this? 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>

Note 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.

+4
source share
2 answers

This is because the <h1> element is a block element , and the random text is inline . Therefore, you need to make <h1> behave like an inline element, which, by the way, means not floating .

Here is the code:

 <!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; font-size: 12px} h1{ display:inline;font-size: 40px;vertical-align: middle;} </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>

O and BTW - DO NOT use tables for layout. It is old, it is ugly, it is not worth it.

+4
source

Sorry, I don’t know why this is happening.

But you could change it to the following:

 <!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> <table><tr><td style='border: 0px;'><h1>1</h1></td><td style='border: 0px;'> The quick brown fox jumps over the lazy dog.</td></tr></table></td> <td>The quick brown fox jumps over the lazy dog.</td> </tr> </table> </body></html>

I know this is ugly - but it works.

+1
source

Source: https://habr.com/ru/post/1306982/

More articles:


All Articles