it-swarm.com.ru

Как выровнять div по вертикали внутри ячейки таблицы?

Как я могу вертикально центрировать div, который находится внутри ячейки таблицы?

HTML:

<tr class="rowClass">
    <td class="cellClass">
        <div class="divClass">Stuff</div>
    </td>
</tr>

CSS:

.rowClass {
    vertical-align:middle !important;
    height:90px;
}

.cellClass {
    vertical-align:middle !important;
    height:90px;
}

.divClass {
    vertical-align:middle !important;
    height:90px;
}

Я знаю, что определения классов избыточны, но я пробовал много разных вещей. Почему решение (каким бы оно ни было) не является интуитивно понятным. Ни одно из "очевидных" решений, которые я попробовал, не сработало.

21
John Anderson

Нет необходимости определять height в .divClass. напишите так:

.cellClass {
    vertical-align:middle;
    height:90px;
    border:1px solid red;
}

Проверьте это http://jsfiddle.net/ncrKH/

14
sandeep

Лучший учебник, который я когда-либо нашел по этому вопросу: Как вертикально отцентрировать материал

1
GEMI

С помощью любого css вы можете сделать это с помощью valign="middle" попробуйте этот код.

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th height="550" align="center" valign="middle" scope="col">

    <div>Hello</div>
    </th>
  </tr>
</table>
0
Sarin Jacob Sunny

.divClass { margin-top:auto; }

HTML

<table border=1>
<tr class="rowClass">
<td class="cellClass">
    <div class="divClass">Stuff</div>
</td>
</tr>
</table>

CSS

.rowClass {
vertical-align:middle !important;
height:90px;
}

.cellClass {
vertical-align:middle !important;
height:90px;
}

.divClass {
margin-top:auto; 
 }​

Живой пример

0
Muhammad Usman