すべての場合において、vertical-align: middle;はtd期待どおりの動作をします。つまり、tdをその行の中央に揃え、 の内容全体をtd垂直方向の中央 (デフォルト) に揃えて、上部と下部に等間隔を残します。
W3 仕様の内容は次のとおりです vertical-align: middle。
セルの中心は、それがまたがる行の中心に揃えられます。
行の高さの計算:
「table-row」要素のボックスの高さは、ユーザー エージェントが行内のすべてのセルを利用できるようになると計算されます。これは、行の計算された「高さ」、行内の各セルの計算された「高さ」の最大値です。およびセルに必要な最小の高さ (MIN)。
CSS 2.1 では、セル ボックスの高さは、コンテンツに必要な最小の高さです。テーブル セルの 'height' プロパティは、行の高さに影響を与える可能性がありますが (上記参照)、セル ボックスの高さは増加しません。
行の高さよりも小さいセル ボックスには、余分な上部または下部のパディングが適用されます。
上記の結果、 と の高さはtr100px にtdなりますが、セルボックスはコンテンツに必要な高さ (img高さ = 43px) しか占有しません。セル ボックスは行の高さよりも小さいため、上の画像のボックス 5 に示すように余分なパディングが追加され、コンテンツも中央に配置されます。
TDには画像のみがあります：
のみのimg場合、コンテンツの高さは の高さと同じimgです。それで真ん中に配置されます。
上の画像からわかるように、はコンテンツを中央に配置するため、明示的vertical-align: middleに on を必要としません。imgtd
TD にはインライン データのみがあります。
にまたはと inlinetdしかない場合、コンテンツの高さはテキストのデフォルト (または指定された任意の )と等しくなります。この場合も、正しく位置合わせされます。spanspandivline-heightline-heighttd
テキスト コンテンツが最初の行を超えると (デモを参照)、 が(シアンの背景でマークされた) をtd自動的に上に押し上げfirst-lineて、コンテンツ全体が (1 行だけでなく) 中央に配置されるようにします。 ）。
TD にはイメージとスパンがあります。
内に animgと a span(インラインテキスト)を入れるとtd、コンテンツの高さは 2 行目以降の the の高さと同じになりimgますline-height。
この状況では、次の 2 つのケースが考えられます。
ケース 1 - img タグが指定されていませ vertical-align ん
この場合、は(デフォルト)imgに揃えられます。baseline次に、tdコンテンツ全体を中央に揃えます。これは、コンテンツの上部と下部でtd約28.5px (= (100-43)/2) のギャップを意味します。繰り返しますが、vertical-alignontdはジョブを実行し、内容を中央に配置します (つまり、上下に均等なギャップを残します)。imgただし、高さが大きいため、テキストが押し下げられます。
img高さを行の高さ (たとえば 10px) より小さくすると、 img+を指定してもspan中央に配置されることがわかります。
ケース 2 - img タグがある vertical-align: middle
この場合もvertical-align、tdはケース 1 で行ったことと同じことを行います。ただし、この場合のテキストは、行の にも配置されているため、中央近くにあります。imgmiddle
table {
border: solid 1px red;
}
td {
height: 100px;
width: 200px;
vertical-align: middle;
border: solid 1px green;
}
img {
height: 43px;
width: 43px;
border: solid 1px green;
}
.one td + td img {
vertical-align: middle;
}
.three td + td img {
height: 10px;
width: 10px;
}
.four img {
vertical-align: middle;
}
.five img + img{
height: 50px;
width: 50px;
}
td:first-line {
background-color: cyan;
}
div {
display: inline;
}
<table>
<tr class='one'>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
</tr>
<tr class='two'>
<td>
<div>aaa</div>
<span>aaa</span>
</td>
<td>
<div>aaa</div>
<span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
</td>
</tr>
<tr class='three'>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
</tr>
<tr class='four'>
<td>
Case 2
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
<tr class='five'>
<td>
Case 3
<img src='http://static.jsbin.com/images/favicon.png' />
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span text...</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
</table>
