ホームページ > ウェブフロントエンド > htmlチュートリアル > css 垂直方向のセンタリングを実現する 5 つの方法_html/css_WEB-ITnose

css 垂直方向のセンタリングを実現する 5 つの方法_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:51:03
オリジナル
883 人が閲覧しました

要約:

ページを作成するときに、コンテンツを垂直方向に中央揃えする必要があることがよくあります。今日は、それぞれの方法に独自の長所と短所があります。以下のコードは私が個人的にテストしたものです。

line-height:

<style>        .content {            height:240px;            line-height: 240px;        }    </style><div class="content">        vertical-align:middle;    </div>
ログイン後にコピー

:before:

<style>        .content {            height: 240px;        }        .child:before {            content: ' ';            display: block;            height: 120px;        }    </style><div class="content">        <div class="child">
ログイン後にコピー
      vertical-align:middle;</div></div>
ログイン後にコピー

padding-top:

<style>        .content {            height:240px;        }        .child {            padding-top: 120px;        }    </style><div class="content">        <div class="child">            vertical-align:middle;        </div>      </div>
ログイン後にコピー

position:absolute:

<style>        .content {            position:absolute;            height:240px;        }        .child {            position: relative;            top:50%;        }    </style><div class="content">        <div class="child">            vertical-align:middle;        </div>      </div>
ログイン後にコピー

ディスプレイ:テーブルセル;

概要:

上記のコードはChromeでテストしたものですが、一部IEでは問題が発生する可能性がありますのでご利用の際はご注意ください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート