wake-up-neo.com

Wie kann ich ein div innerhalb einer Tabellenzelle vertikal ausrichten?

Wie zentriere ich ein Div innerhalb einer Tabellenzelle vertikal?

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

Ich weiß, dass die Klassendefinitionen überflüssig sind, aber ich habe viele verschiedene Dinge ausprobiert. Warum ist die Lösung (was auch immer sie ist) nicht intuitiv? Keine der "offensichtlichen" Lösungen, die ich ausprobierte, würde funktionieren.

21
John Anderson

In .divClass ist es nicht erforderlich, height zu definieren. schreibe so:

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

Überprüfen Sie diese http://jsfiddle.net/ncrKH/

14
sandeep

Das beste Tutorial, das ich je zu dieser Frage gefunden habe: Wie vertikal zentrieren

1
GEMI

Ohne css selbst können Sie dies mit valign="middle" tun, versuchen Sie diesen Code.

<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

.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; 
 }​

Live-Beispiel

0
Muhammad Usman