コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

CSS_html/css_WEB-ITnose で DIV コンテナの垂直方向のセンタリングを実装します。

WBOY
リリース： 2016-06-24 12:27:18
オリジナル
1045 人が閲覧しました

1.vertical-align: 中央の垂直方向の配置

テーブル要素の 、、 など、

、 のような要素はvalign 機能がないため、vertical-align を使用しても機能しません。

2.text-align:center テキストは水平方向に中央揃えになります

1. 単一行の垂直方向の中央揃え

コンテナ内にテキストが 1 行しかない場合、テキストを中央揃えにするのは比較的簡単です。実際の高さと位置を設定する 行の高さ line-height は同じにすることができます。例:

ExampleSourceCode

DIV{ height:25px; line-height:25px; overflow:hidden; //overflow:hidden の設定は、コンテンツがコンテナを超えたり、自動的に行を折り返したりするのを防ぐために使用されます。 Internet Explorer 6 以前では、このメソッドとメソッドは画像の垂直方向の中央揃えをサポートしていません。

2. 高さが不明な複数行のテキストの垂直方向の中央揃え

コンテンツの高さが可変の場合、前のセクションで説明した水平方向の中央揃えを実現するために使用される最後の方法、つまり Padding を設定することができます。上部と下部のパディング値を同じにするだけです。繰り返しますが、これは垂直方向の中央揃えを「見せる」方法であり、テキストを
内に完全に埋める方法にすぎません。次のようなコードを使用できます:

DIV{padding:25px; }

このメソッドの利点は、どのブラウザでも実行でき、コードが非常に単純であることですが、このメソッドの前提条件は、コンテナはフレキシブルである必要があります。

関連ラベル：
CSS中实现DIV容器垂直居中
ソース：php.cn
前の記事：CSS 等高レイアウト、3div は最も高い高さに適応_html/css_WEB-ITnose 次の記事：Css Div 位置と float_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
DIV を両側のコンテンツに合わせて中央揃えにします したがって、(含まれる DIV 内に) 5 つの項目があります。項目の並びは以下の通りです。 テキスト 画像 DIV 画像 テキスト DIVを中心にして画像がDIVを「抱き締める」...
から 2024-04-04 23:19:14
0
1
3438
CSS スタイルシートが機能しなくなり、HTML ファイルにリンクしなくなりました。原因は何でしょうか? 多くのフォーラムで答えを探し、約 50 の Google リンクを調べましたが、有効なものが見つかりませんでした。CSS が HTML に表示されません。私のコードは、フレックスボ...
から 2024-04-03 09:49:45
0
1
402
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート