html - HTMLの垂直方向の配置とh2タグの中央揃え

Question

以下のコードに誤りがあるかどうか教えていただけますか? テキストを中央にも中央（垂直）にも配置しません。

<td> <h2 style = "align:center; vertical-align:middle;">TEXT</h2></td>

Answer 1

探しているスタイルは、実際にはtext-alignではなくと呼ばれていalignます。さらに、vertical-alignヘッダーをセル内で垂直方向に揃える必要がある場合、スタイルはここでは役に立ちません。次のことを試してください。

<td style="vertical-align: middle;">
    <h2 style="text-align: center;">TEXT</h2>
</td>

Answer 2

要素をページの中央 (水平および垂直) に配置するには、余白を使用することができます。これにはさまざまな方法があります。これはそのうちの 1 つにすぎません。余白はコンテナ要素の半分のサイズになります。例：

<td style="width:100%; height:100%;"> 
 <h2 style="position:absolute;top: 50%; left: 50%;">TEXT</h2> 
</td>

注: vertical-align プロパティは、テキストではなく画像で機能します。そのため、テキストをページまたは要素内の中央に配置するための他のソリューションを見つける必要があります。1 つの方法はこれです。余白。

このアプローチの欠点は、要素の中心がページの中央に配置されないことです。いわば要素の境界から真ん中に押し出されます。これは、要素が大きい場合、要素の中心点ではなく、左上隅がページの中心になることを意味します。これは、要素のサイズに応じて負のマージンを使用することで修正できます。センタリングする要素のサイズを知る必要があります。例：

中央に配置する要素 (クラス .centered) が 200px x 100px の場合、要素の中央から中央に配置するCSSは次のようになります。

.centered { 
 position: fixed;  
 top: 50%;  
 left: 50%;  
 margin-top: -50px;  
 margin-left: 100px;
}