CSS_html/css_WEB-ITnose の水平方向と垂直方向の中央揃え-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS_html/css_WEB-ITnose の水平方向と垂直方向の中央揃え

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

CSS の世界では、ブロックレベルの要素を水平方向に中央揃えにしたい場合、誰もが margin:0 auto; の使用方法を知っていなければなりません。そうすれば、ブロックレベルの要素は親要素の中で水平方向に中央揃えに配置されます。

は次のようにリストされます:

<!DOCTYPE html>    <head>        <title>center</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                .parent {                width:50%;                height:100px;                border:1px solid black;                position:relative;            }            .child {                margin:0 auto;                width:50px;                height:50px;                background:#22B14C;            }            </style>    </head>    <body>        <div class="parent">               <div class="child">                         </div>        </div>    </body></html>

ログイン後にコピー

実行効果図は次のとおりです。緑の四角形は親要素の水平方向の中心にあります

、では、問題は、緑の四角形を次のようにしたいかということです。垂直方向または水平方向と垂直方向の中央に配置されますか？

margin:auto 0; または margin:auto; を設定するだけで十分ですか?

margin: 0 auto に設定すると水平方向に中央揃えにできるので、私もそう思っていました。

しかし、垂直方向のセンタリングの場合はそうではありません。

通常のドキュメントフローでは、margin:auto を設定すると、ブラウザが解析するときに margin:0 auto;

(margin-top と margin-bottom を 0 に設定し、margin-left と margin を設定します) -right は左右適応に設定されます)。

W3.orgより抜粋

心配な場合は、上記のデモの margin:0 auto; を margin:auto; に置き換えても、操作後の結果は同じになります。

ねえ、ブロックレベルの要素を垂直方向の中央に配置したい場合はどうすればよいでしょうか?

方法 1:

要素を絶対配置に設定します。これにより、要素を通常のドキュメントフローから分離できます。absolute には、要素の表示をブロックに設定するという機能があります。

次に、絶対配置座標 (左、上、右、下) を 0 に設定します。これにより、ブラウザーは絶対配置用に新しいボックスモデルをラップします。

margin と組み合わせると、水平方向の中央揃え (margin:0 auto;)、垂直方向の中央揃え (margin:auto 0;)、水平方向と垂直方向の中央揃え (margin:auto;) を完璧に行うことができます。

以下のデモは「水平方向と垂直方向のセンタリング」です:

<!DOCTYPE html>    <head>        <title>center</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                .parent {                width:50%;                height:100px;                border:1px solid black;                position:relative;            }            .child {                margin: auto;                position: absolute;                top:0;                left:0;                bottom:0;                right:0;                width:50px;                height:50px;                background:#22B14C;            }            </style>    </head>    <body>        <div class="parent">                   <div class="child">                         </div>        </div>    </body></html>

ログイン後にコピー

PS: position:fixed もドキュメントフローから分離できるため、absolute と同じですが、違いは次のとおりです。固定されたものは、ブラウザウィンドウの位置に相対的です。

方法 2:

方法 1 は要素のドキュメントフローを変更することですが、そのドキュメントフローを変更する場合はどうでしょうか?

次に、別の方法を見つけて、要素の幅と高さを計算しましょう。

どういう意味ですか？

「垂直方向の中央揃え」を例に挙げます。子要素がある場合、その親要素であるparentを中心に垂直方向の中央揃えにする必要があります。以下の図に示すように、次のとおりです。

CSS はどのように使用すればよいですか?

リスト 2:

(1)、マージン + 絶対値

子を絶対値に設定し、その上部と右側を 50% に設定すると、子要素レイヤーは図 2 の状況を表示します

次に、要素の margin-top と margin-right を -50% にすると、垂直方向のセンタリングを実現できます。

サンプルコードは次のとおりです:

rrree

(2)、translate + ABS

子を絶対に設定し、その上部と右側を50%に設定してから、子要素のレイヤーを設定します上の図 2 の状況が表示されます。

要素を 50%、移動して 50% 移動すると、図 3 のように垂直方向のセンタリングを実現することもできます。

サンプルコードは以下の通りです:

<!DOCTYPE html>    <head>        <title>center</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                .parent {                width:50%;                height:100px;                border:1px solid black;                position:relative;            }            .child {                position:absolute;                width:50px;                height:50px;                top:50%;                left:50%;                margin-top:-25px;                margin-left:-25px;                background:#22B14C;            }                 </style>    </head>    <body>        <div class="parent">            <div class="child">                             </div>        </div>    </body></html>

ログイン後にコピー

方法 3:

table-cell 属性を使用して簡単に実装できます。

親要素を table-cell に変更すると、table 属性vertical-align:middle を使用して要素を垂直方向に中央揃えにし、子要素 margin:0 atuo を設定して水平方向の中央揃えを実現できます。

追記:

table-cell は、display:table 要素に含める必要があります。table-cell は table に属します。

サンプルコードは次のとおりです:

<!DOCTYPE html>    <head>        <title>center</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>                .parent {                width:50%;                height:100px;                border:1px solid black;                position:relative;            }            .child {                position:absolute;                width:50px;                height:50px;                top:50%;                left:50%;                <!--渐进增强-->                -webkit-transform: translate(-50%,-50%);                    -ms-transform: translate(-50%,-50%);                        transform: translate(-50%,-50%);                background:#22B14C;            }                 </style>    </head>    <body>        <div class="parent">            <div class="child">                             </div>                    </div>    </body></html>

ログイン後にコピー

さて、CSS の垂直方向と水平方向の中央揃えについては以上です (フレキシブルレイアウト Flex はこの記事の範囲外です)。

皆さんおやすみなさい〜

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。