単一/複数行テキストを含む 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 タグの違いは何ですか?

推薦する

CSS3で実装された読み込みアニメーション

成果を達成する実装コード <h1>123WORDPRESS.COM</h1>...

IE6 での PNG アルファ透明度 (完全コレクション)

IE6 は PNG の透明度をサポートしていないと多くの人が言っています。実際、IE は 100%...

W3C標準に準拠したHTML標準で注意すべき点を詳細に解説

XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE html PUB...

MySQL 5.7 でデータベースのデータ保存場所を変更する方法

MySQL データベースに保存されるデータが徐々に増加すると、元のストレージ領域がいっぱいになり、M...

vue.js 動的コンポーネントの詳細な説明

:動的コンポーネントv-bind:is="component name" を使用...

Zabbixについて管理者ログインパスワードを忘れた場合、パスワードをリセットする

Zabbix 管理者ログイン パスワードのリセットに関する問題は次のとおりです。 1. 問題の説明:...

CSS グリッドレイアウトを使用してレスポンシブな縦棒グラフを作成する方法

私はしばらくの間チャートをいじっていましたが、好奇心から、CSS を使用してチャートを作成するより良...

反応ループデータの実装(リスト)

まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくする...

MySQL 空間データストレージと関数

目次1. データ型1. MySQL空間データとは何か2. GeoJSONとは3. 空間データ型のフォ...

mysql mycat ミドルウェアのインストールと使用

1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...

163 メールボックスログインボックスインタラクティブデザインの改善体験と共有

LOFTER のコンテストで、ログイン ボックスを再設計できると言及されているのを見ました。過去 2...

Nginx 仮想ホスト (IP ベース) を構成する 3 つの方法の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

Linux (CentOS) システムで MySQL データベース ディレクトリの場所を変更する方法

CentOS システムで MySQL データベース ディレクトリの場所を変更する方法1. まず、My...

nginx で同時接続リクエストの数を制限する方法

導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...