web-dev-qa-db-fra.com

Comment aligner verticalement une div dans une cellule de tableau?

Comment centrer verticalement une div qui se trouve dans une cellule de tableau?

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

Je sais que les définitions de classe sont redondantes, mais j'ai essayé beaucoup de choses différentes. Pourquoi la solution (quelle qu'elle soit) n'est pas intuitive. Aucune des solutions "évidentes" que j'ai essayées ne fonctionnerait.

htmlcsshtml-tablevertical-alignment
21
John Anderson

Il n'est pas nécessaire de définirheight dans .divClass. écris comme ceci:

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

Vérifiez ceci http://jsfiddle.net/ncrKH/

14
sandeep

Le meilleur tutoriel que j'ai jamais trouvé concernant cette question: Comment centrer verticalement les choses

1
GEMI

Avec tout css lui-même, vous pouvez faire cela avec valign="middle" essayer ce 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
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; 
 }​

Exemple en direct

0
Muhammad Usman