Ячейка таблицы не подчиняется объявлению CSS с вертикальным выравниванием, если она содержит плавающий элемент - PullRequest
Новая
       1

Ячейка таблицы не подчиняется объявлению CSS с вертикальным выравниванием, если она содержит плавающий элемент

4 голосов
/ 15 апреля 2010

Я пытаюсь создать таблицу, в которой каждая ячейка содержит большой плавающий h1 с левой стороны и большее количество мелкого текста справа от большого текста, вертикально центрированного.

Однако небольшой текст отображается вверху каждой ячейки, несмотря на то, что он имеет объявление «vertical-align: middle». Когда я удаляю большой плавающий элемент, все выглядит хорошо. Я тестировал его в последних версиях IE, Firefox и Safari, и это происходило в каждом случае.

Почему это происходит? Кто-нибудь знает способ обойти это? Вот пример: 

<!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>

Обратите внимание, что небольшой текст в первой ячейке по какой-то причине находится сверху, но текст во 2-й ячейке расположен по центру.

Ответы [ 2 ]

4 голосов
/ 15 апреля 2010

Это потому, что элемент <h1> является блочным элементом , а случайный текст inline . Так что вы должны заставить <h1> вести себя как встроенный элемент, что, кстати, означает без плавающего .

Вот код: 

<!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>

Ох и кстати - не надо НЕ использовать таблицы для разметки. Он старый, некрасивый, он того не стоит.

1 голос
/ 15 апреля 2010

Извините, понятия не имею, почему он это делает.

Но не могли бы вы изменить это на следующее: 

<!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>

Я знаю, что это некрасиво, но это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...