単一/複数行テキストを含む div を垂直方向に中央揃えする N 通りの方法 (高さ不明/高さ固定)

単一/複数行テキストを含む div を垂直方向に中央揃えする N 通りの方法 (高さ不明/高さ固定)
この問題について話すとき、垂直方向の中央揃えを設定するための 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 チュートリアル。

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

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

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

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

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

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

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

<!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{
パディング:25px;
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
幅:760ピクセル;
}
</スタイル>
</head>
<本文>
<div><pre>ここで、このテキストを垂直方向に中央揃えにします。
div{
パディング:25px;
境界線:1pxsolid#FF0099;
背景色:#FFCCFF;
}
</pre></div>
</本文>
</html>

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 ですが、horizo​​ntal center align の値は center です。どちらも中央揃えですが、キーワードが異なります。

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

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

推薦する

Mysql は、デッドロック問題を解決するために kill コマンドを使用します (実行中の特定の SQL ステートメントを強制終了します)。

MySQL を使用して特定のステートメントを実行すると、データ量が多いためにデッドロックが発生し、...

ウェブフロントエンドエンジニアにおすすめのヒント

まず、Webフロントエンドエンジニアの価値についてお話ししましょう。現在、Web製品のインタラクショ...

計算機機能を実現するjsバージョン

この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

MySQL で指定した桁数の乱数を生成する方法と、バッチで乱数を生成する方法

1. まず、よく使われるMySQL関数をいくつか紹介しますRAND() は 0 から 1 (0<...

CSS を使用して固定ナビゲーションと左右スライドを備えたスクロール バーを作成する方法

上に示すように、ナビゲーションは上部に固定されており、左右にスライドしてさらにオプションをクリックで...

MySQL 集計関数のソート

目次MySQL 結果のソート - 集計関数環境クエリ結果の並べ替えクエリのグループ化と集約生徒の平均...

Google Web Fonts でウェブサイトに無制限のフォントを追加

長い間、リソースの制約により、使用できるフォントが限られていたため、Web サイトの開発は妨げられて...

ピクセルを包括的なブランド体験に変えるヒント

編集者:この記事では、インタラクティブデザインがブランドコミュニケーションチェーン全体で果たすべき役...

MySQL データ挿入効率の比較

データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...

32 典型的な列/グリッドベースのウェブサイト

列ベースの Web デザインのインスピレーションをお探しの場合は、32 個のクラシックな列/グリッド...

IE、Firefox、Chromeブラウザではスペースの表示が異なります

&nbsp;&nbsp;IE、Firefox、Chrome ブラウザでの表示効果は、...

Dockerでrabbitmqをデプロイする際に発生した2つの問題

1. 背景DockerでRabbitMQをデプロイする際に、次の2つの問題が発生します。問題1: ス...

MySQLストアドプロシージャを変更する詳細な手順

序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...

シンプルなカルーセル チャートを実装するための JavaScript の最も完全なコード分析 (ES5)

この記事では、シンプルなカルーセル効果を実現するためのJavaScriptの具体的なコードを参考まで...

crontab 実行時間とシステム時間の不一致の解決方法

序文LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...