Проблема с выравниванием ячеек таблицы по вертикали

Question

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

С float: left

Без float: left

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

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

Answer 1

Я не знаю, поможет ли это (сейчас я оставил табличные макеты позади), но для решения аналогичной проблемы с помощью straight divы вы можете сделать то же самое, используя 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
{
    height: 30px;
    line-height: 30px;
}

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

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

display: block;

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

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