さまざまな姿勢の CSS 水平方向のセンタリング_html/css

さまざまな姿勢の CSS 水平方向のセンタリング_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:36:22

オリジナル

1050 人が閲覧しました

まず、最も一般的に使用されるのは、margin 属性の auto を使用して水平方向のセンタリングを実行する方法です

margin: 0 auto;

ここで、0 は上下のマージンを指し、auto は左右のマージンを指しますマージン、マージン属性の略語は時計回りです。ウォーキングとは、上、右、下、左を意味します。パラメータが 2 つある場合、最初のパラメータは上下を表し、2 番目のパラメータは左右を表します。

このメソッドを使用するには、コンテナーに幅が必要であることに注意してください。

<!DOCTYPE html><html><head>    <title></title>    <style>        #container{            width: 960px ;            height: 500px ;            background-color: red ;            margin: 0 auto;        }    </style></head><body>    <div id="container"></div></body></html>

ログイン後にコピー

絶対レイアウトとオフセットを使用する 2 番目の姿勢

left: 50%;
margin-left: // コンテナの幅の半分

絶対レイアウトコンテナの位置は、最初に配置された親要素を基準にしています。そうでない場合は、絶対レイアウトで、左、上、右、下を使用して位置を調整できます。

位置は px の長さまたはパーセンテージで指定できます。パーセンテージの場合は、親要素の長さの半分に対するコンテナのその側の位置 (たとえば、左が左) を意味します。

したがって、left: 50% が設定されている場合、コンテナの左側が親要素の中央に達すると、コンテナの幅の半分を左に移動してコンテナを中央に配置するだけで済みます。

<!DOCTYPE html><html><head>    <title></title>    <style>        #container{            width: 960px ;            height: 500px ;            background-color: red ;            position: absolute;            left: 50% ;            margin-left: -480px ;        }    </style></head><body>    <div id="container"></div></body></html>

ログイン後にコピー

text-algin: center と display: inline-block を使用する 3 番目の姿勢

text-align: center

display: inline-block;

text-align は親レベル以上。

display: inline-block でコンテナ内の要素を設定した後、その動作の一部は inline 要素と同じになるため、text-align: center を使用して要素を中央に配置できます。

これにより、子要素の幅がわからないという問題が解決されます。

<!DOCTYPE html><html><head>    <title></title>    <style>        #container{            text-align: center;        }        .block{            display: inline-block;            width: 100px ;            height: 100px ;            background-color: red ;        }    </style></head><body>    <div id="container">        <div class="block">1</div>        <div class="block">2</div>        <div class="block">3</div>    </div></body></html>

ログイン後にコピー

4 番目の姿勢、フローレイアウト

3 つのコンテナーがあり、左右のコンテナーに背景適応幅がなく、幅が等しい場合、中央の要素は中央に配置されることに相当します。

この効果は、親要素に display: flex を設定してから、両側の子要素に同じ flex を設定することで実現できます (重みとして理解できます。重みは未定義のスペースを均等に分割します)

親要素に注目してください。display:flexを設定すると、子要素のfloat、vertical-align、clear属性が無効になります。流体レイアウトはデフォルトでは水平であり、flex-direction を使用して方向を変更できます。

フレックスレイアウトについて詳しく知りたい場合は、右側のリンクを参照してください。 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

<!DOCTYPE html><html><head>    <title></title>    <style>        html,body{            height: 100% ;            width: 100% ;        }        #container{            display: flex ;            height: 100% ;            width: 100% ;        }        .side{            flex:1;            height: 100% ;        }        .center{            width: 960px ;            height: 100% ;            background-color: red ;        }    </style></head><body>    <div id="container">        <div class="side"></div>        <div class="center"></div>        <div class='side'></div>    </div></body></html>

ログイン後にコピー

厳密モードでは注意してください。厳密モードではコンテナは親要素の長さと幅を認識せず、高さと幅が存在しないため、この文は不可欠です。 ❤️