Вопрос вертикального выравнивания ячейки таблицы - PullRequest
Новая
       24

Вопрос вертикального выравнивания ячейки таблицы

0 голосов
/ 11 сентября 2011

Я установил float для одной из ячеек моего стола. Но теперь я не могу изменить вертикальное выравнивание его содержимого. По умолчанию он перемещает содержимое в верхнюю часть div. Я пытался valign: middle, vertical-align: middle безуспешно. Вот результаты:

С float: left

After changing float (float:left)

Без float: left

enter image description here

Как я могу выровнять содержимое ячейки по вертикали с плавающей точкой? И разметка выглядит так 

<td id="top_logo">
    <a href="index.php">
        <img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
    </a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>

1 Ответ

1 голос
/ 11 сентября 2011

Не знаю, поможет ли это (сейчас я оставил макеты на основе таблиц), но для решения аналогичной проблемы, используя прямые div s, вы можете сделать то же самое, используя правило line-height. 

<div id="tableRow">
    <div id="leftCell"><img src="mylogo" /></div>
    <div id="middleCell">&nbsp;</div>
    <div id="rightCell">User Name Here</div>
</div>

Ваш CSS будет создан для установки ширины / высоты и т. Д., Что, я думаю, вам не понадобится для таблицы, а для вашего "rightCell" вы бы установили высоту строки такой же, каквысота строки: 

#rightCell
{
    height: 30px;
    line-height: 30px;
}

В таком случае текст центрируется по вертикали в пространстве строк, что, поскольку оно равно высоте, создает впечатление, что он тоже находится в центре элемента.

Теперь, как я уже сказал, я НИКОГДА не пробовал это на ячейке таблицы, однако любой современный браузер должен позволить вам изменить свойство display на block или inline-block, используя: 

display: block;

Замена блока для любых других типов, где это необходимо.Это установит тип отображения ячейки как div (или диапазон, или какой-либо другой элемент), но я НЕ ЗНАЮ, какой эффект это окажет на таблицу.

Обратите также внимание,что я не обращаюсь к старым браузерам Как IE6 здесь, чтобы сделать эту работу по всем направлениям вам, возможно, придется сделать некоторые хаки для старых браузеров, если требуется поддержка.

...