高さ固定)

この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が CSS にはないのかと尋ねる人もいるかもしれません。一部のブラウザがサポートしていなくても、CSSHack テクノロジーを少し使用すれば済みます。ここでもう少し説明する必要があります。確かに CSS には vertical-align 属性がありますが、これはテーブル要素の <td>、<th>、<caption> など、valign 属性を持つ (X)HTML 要素内の要素にのみ機能します。一方、<div> や <span> などの要素には valign 属性がないため、これらの要素では vertical-align を使用しても機能しません。
1. 1 行の垂直方向の中央揃え<br />コンテナー内にテキストが 1 行しかない場合、中央揃えは比較的簡単です。実際の高さを、テキストが含まれる行の行高と同じに設定するだけです。
のように：

コードをコピー

コードは次のとおりです。

div{
高さ:25px;
行の高さ:25px;
オーバーフロー:非表示;
}

このコードは非常にシンプルです。overflow:hidden 設定は、コンテンツがコンテナーを越えたり、自動行折り返しが発生して垂直方向の中央揃え効果が得られなくなるのを防ぐために後で使用されます。その他の CSS チュートリアル。

コードをコピー

コードは次のとおりです。

2. 高さが不明な複数行のテキストの垂直方向の中央揃え<br />段落の高さが可変の場合、前のセクションで説明した最後の方法を使用して水平方向の中央揃えを実現できます。これは、上と下の行が中央揃えになるようにパディングを設定することです。
パディング値は同じにすることができます。繰り返しますが、これは垂直方向に中央揃えされているように「見せる」方法であり、単にテキストを <div> 内に完全に埋め込む方法にすぎません。次のようなコードを使用できます。

コードをコピー

コードは次のとおりです。

div{
パディング:25px;
}

この方法の利点は、どのブラウザでも実行でき、コードが非常にシンプルなことですが、この方法の前提は、コンテナーの高さがスケーラブルである必要があることです。

コードをコピー

コードは次のとおりです。

3. 固定の高さで複数行のテキストを中央揃えにする<br />この記事の冒頭で、CSS の vertical-align 属性は valign 属性を持つ (X)HTML タグでのみ機能すると述べましたが、CSS には <table> をシミュレートできる display 属性もあるため、この属性を使用して <div> で <table> をシミュレートし、vertical-align を使用することができます。親要素に display:table と display:table-cell を設定し、子要素に display:table-cell を設定する必要があることに注意してください。そのため、配置する必要があるテキスト用に別の <div> 要素を追加する必要があります。

コードをコピー

コードは次のとおりです。

div#ラップ{
高さ:400px;
表示:テーブル;
}
div#コンテンツ{
垂直位置揃え:中央;
表示:テーブルセル;
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
}

コードをコピー

コードは次のとおりです。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<title>複数行テキストの垂直中央揃え</title>
<metahttp-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
<スタイルタイプ="text/css">
本文{フォントサイズ:12px;フォントファミリー:tahoma;}
div#ラップ{
高さ:400px;
表示:テーブル;
}
div#コンテンツ{
垂直位置揃え:中央;
表示:テーブルセル;
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
}
</スタイル>
</head>
<本文>
<div="ラップ">
<divid="content"><pre>ここで、このテキストを垂直方向に中央揃えにします。 Webjx.Com
div#ラップ{
高さ:400px;
表示:テーブル;
}
div#コンテンツ{
垂直位置揃え:中央;
表示:テーブルセル;
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
}
</pre></div>
</div>
</本文>
</html>

この方法は理想的ですが、残念ながら Internet Explorer 6 は display: table と display: table-cell を正しく理解しないため、この方法は Internet Explorer 6 以前では無効です。まあ、これは非常に憂鬱ですね！しかし、他の方法もあります
4. Internet Explorerでの解決策
Internet Explorer 6 以下では高度の計算に不具合があります。 Internet Explorer 6 で親要素を配置した後、子要素に対してパーセンテージ計算を行うと、計算の基準が継承されるようです (配置した値が絶対値であればこのような問題はありませんが、パーセンテージ計算の基準は要素の高さではなく、親要素から継承した配置した高さになります)。たとえば、次の (X)HTML スニペットがあります。

コードをコピー

コードは次のとおりです。

<div="ラップ">
<divid="サブラップ">
<div="コンテンツ">
</div>
</div>
</div>

サブラップを絶対配置すると、コンテンツもこのプロパティを継承します。ページにすぐには表示されませんが、コンテンツを相対配置すると、使用する 100% 比率はコンテンツの元の高さではなくなります。たとえば、サブラップの位置を 40% に設定した場合、コンテンツの上端をラップと一致させたい場合は、top: -80% に設定する必要があります。次に、サブラップの top: 50% に設定した場合は、コンテンツを元の位置に戻すために 100% を使用する必要がありますが、コンテンツも 50% に設定した場合はどうなるでしょうか。すると、垂直方向に正確に中央に配置されます。したがって、この方法を使用して、Internet Explorer 6 で垂直方向の中央揃えを実現できます。

コードをコピー

コードは次のとおりです。

div#ラップ{
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:400px;
位置:相対;
}
div#サブラップ{
位置:絶対;
境界線:1pxsolid#000;
上位:50%;
}
div#コンテンツ{
境界線:1pxsolid#000;
位置:相対;
上:-50%;
}

もちろん、このコードは、Internet Explorer 6 などの計算上の問題があるブラウザーでのみ機能します。 (しかし、理解できません。多くの記事を参照しましたが、同じソースのためか、他の理由のためかはわかりませんが、InternetExlporer6 のこのバグの原理を説明したがらない人が多いようです。私は少ししか理解していないので、さらに勉強する必要があります。)

コードをコピー

コードは次のとおりです。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<title>複数行テキストの垂直中央揃え</title>
<metahttp-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
<スタイルタイプ="text/css">
本文{フォントサイズ:12px;フォントファミリー:tahoma;}
div#ラップ{
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:400px;
位置:相対;
}
div#サブラップ{
位置:絶対;
上位:50%;
}
div#コンテンツ{
位置:相対;
上:-50%;
}
</スタイル>
</head>
<本文>
<div="ラップ">
<divid="サブラップ">
<divid="content"><pre>ここで、このテキストを垂直方向に中央揃えにします。
div#ラップ{
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:500px;
位置:相対;
}
div#サブラップ{
位置:絶対;
境界線:1pxsolid#000;
上位:50%;
}
div#コンテンツ{
境界線:1pxsolid#000;
位置:相対;
上:-50%;
</前>
</div>
</div>
</div>
</本文>
</html>

5. 完璧な解決策<br />上記の 2 つの方法を組み合わせることで完璧な解決策を得ることができますが、これには CSShack の知識が必要です。 CSSHack を使用してブラウザを区別する方法については、「シンプルな CSShack: IE6、IE7、IE8、Firefox、Opera を区別する」を参照してください。

コードをコピー

コードは次のとおりです。

div#ラップ{
表示:テーブル;
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:400px;
_position:相対;
オーバーフロー:非表示;
}
div#サブラップ{
垂直位置揃え:中央;
表示:テーブルセル;
_position:絶対;
_トップ:50%;
}
div#コンテンツ{
_position:相対;
_トップ:-50%;
}

この時点で、完璧なセンタリングソリューションが作成されます。

コードをコピー

コードは次のとおりです。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<title>複数行テキストの垂直中央揃え</title>
<metahttp-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
<スタイルタイプ="text/css">
本文{フォントサイズ:12px;フォントファミリー:tahoma;}
div#ラップ{
表示:テーブル;
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:400px;
_position:相対;
オーバーフロー:非表示;
}
div#サブラップ{
垂直位置揃え:中央;
表示:テーブルセル;
_position:絶対;
_トップ:50%;
}
div#コンテンツ{
_position:相対;
_トップ:-50%;
}
</スタイル>
</head>
<本文>
<div="ラップ">
<divid="サブラップ">
<divid="content"><pre>ここで、このテキストを垂直方向に中央揃えにします。
div#ラップ{
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
高さ:500px;
位置:相対;
}
div#サブラップ{
位置:絶対;
境界線:1pxsolid#000;
上位:50%;
}
div#コンテンツ{
境界線:1pxsolid#000;
位置:相対;
上:-50%;
</前>
</div>
</div>
</div>
</本文>
</html>

ps vertical center の vertical-align の値は middle ですが、horizontal center align の値は center です。どちらも中央揃えですが、キーワードが異なります。

<<: MySQL はどのようにしてマスターとスレーブの一貫性を確保するのでしょうか?

>>: xHTML タグと HTML タグの違いは何ですか?