[転送] CSS div テキストは垂直方向に中央揃え --- 翻訳元: http://blog.163.com/zhaoyanping_1125/blog/static/20132915320120574238932/_html/css

[転送] CSS div テキストは垂直方向に中央揃え --- 翻訳元: http://blog.163.com/zhaoyanping_1125/blog/static/20132915320120574238932/_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:32 PM

問題: div 内でテキストを垂直方向の中央に配置する垂直方向の配置が機能しません。では、divのテキストを垂直方向の中央揃えに設定する方法を説明します。
「CSS テキストの垂直方向の中央揃え」に関する記事はインターネット上に多数あります。主に次の 3 つの方法があります。

1. 単一行のテキストの垂直方向の中央揃え:
方法: テキストの段落の高さ (行の高さ) とエリアの高さ（高さ））を一定に設定できます。
欠点: この方法は単一行のテキストにのみ機能します。

コード:

ウェブサイト開発ログ

2.垂直方向のセンタリング:
方法: 領域の高さを設定せず (高さを適応させます)、領域の上部と下部で同じパディングコントロールを使用します。つまり、パディング属性を使用します。
欠点: 固定高さの間隔には無効です。

コード:

このブログは、ウェブサイト開発のあらゆる詳細を記録するために使用されます。 Web サイトのデザイン、プログラミングガイド、リソース、インスピレーションが含まれます。
このサイトの記事のほとんどはオリジナルまたは翻訳された作品です。

3. ブラウザを中央に配置します:

方法: 位置属性を絶対 (絶対) に設定し、ブラウザの高さの半分からテキスト領域の高さの半分を引いた値より上の距離を残します。テキスト領域などの場合、高さはブラウザの高さの 20% であるため、50%-10%=40% が上部に残され、同様にブラウザの幅の半分からテキスト領域の幅の半分が残されます。左に。
欠点: この方法では、テキストがブラウザの中央に配置されるだけで、特定の領域の中央には配置されません。

コード:

このブログは、ウェブサイト開発のあらゆる詳細を記録するために使用されます。 Web サイトのデザイン、プログラミングガイド、リソース、インスピレーションが含まれます。
このサイトの記事のほとんどはオリジナルまたは翻訳された作品です。インターネットはリソースを共有するように設計されているため、転載することに異論はありません。
ただし、私の記事を引用する場合は出典を明記してください。ありがとう！

4. 上記の 3 つの方法にはすべて欠点があるため、多くの場合、必要な解決策ではありません。実際には、特定の高さの領域内で複数行のテキストを垂直方向の中央に配置する必要がある場合があります。上記の 3 つの方法がどれもうまくいかない場合は、以下で紹介する CSS テキストの中央揃えの最後の解決策を試してください。実際、最終的な解決策は複雑ではありません。少し厄介なのは、ブラウザの互換性の問題です。したがって、2 セットの CSS スタイルスキームを作成する必要があります:

.outer {
display:table; width:578px; overflow:hidden;
background: #eee; height: 42px;
}
.middle {display:table -cell ;vertical-align:middle; margin-left 10px;}
/*次の CSS は IE7、IE6 用です*/