web-dev-qa-db-ja.com

テーブルセル内で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;
}

クラス定義が冗長であることは知っていますが、さまざまなことを試してきました。ソリューションが（それが何であれ）直感的ではないのはなぜですか。私が試した「明白な」解決策はどれもうまくいきませんでした。

htmlcsshtml-tablevertical-alignment
25
John Anderson

。divClassでdefine heightを定義する必要はありません。このように書く：

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

これを確認してください http://jsfiddle.net/ncrKH/

17
sandeep

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

.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

この質問に関して私が見つけた最高のチュートリアル： ものを垂直方向に中央に置く方法

0
GEMI