CSS 属性を使用してさまざまな中央揃えメソッドを実装する方法の詳細なコード説明

最初に行うことは、水平方向に中央揃えにすることです。もちろん最も簡単な方法は、

margin:0 auto;

つまり、margin-left プロパティと margin-right プロパティを auto に設定して水平方向の中央揃えの効果を実現することです。

他の方法はどうですか？

line-height

まず、テキストの水平方向の中央揃え方法を紹介します:

<p class="wrap">刘放</p>

line-height を高さと同じになるように使用します:

.wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;
   height: 200px;
  font-size: 36px;
  background-color: #ccc;
}

効果は次のとおりです:

padding fill

パディングを使用し、背景クリップを使用して p の水平方向と垂直方向のセンタリングを実現します:

<p class="parent">  
<p class="children">
</p>
</p>

backgroun-clip を content-box に設定し、背景をコンテンツ領域の外端まで切り抜き、パディングを使用して次のように設定します。外側の p から内側の p を引いた差の半分です。 実装:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

効果は次のとおりです:

余白を埋める

次に、水平方向と内側の p を実現するための余白を埋める方法を紹介します。垂直方向のセンタリング。
まず、親と子 p を定義します:

<p class="parent">
  <p class="children"></p>
</p>

ここでは、子 p のマージン上部を親 p の高さから子 p の高さの半分を引いた値に設定し、次にオーバーフローを非表示に設定して、親 p の BFC および LESS コードは次のとおりです:

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

最終的なセンタリング効果は次のとおりです:

絶対位置決め

上、左 50% でposition:absolute を使用し、マージンを次のように設定します。 p を水平方向と垂直方向に中央に配置するには、まず、親子 p:

<p class="parent">
  <p class="children"></p>
</p>

を定義し、次に対応する CSS を設定する必要があります:

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

最後のマージンの値は、p の幅の半分です。レンダリングは次のとおりです:

text-aligncentered

ご存知のとおり、text-align はコンテンツを p の水平方向の中央に配置できます。しかし、サブ p をこの p の中心に配置したい場合はどうすればよいでしょうか? sub-pの表示をinline-blockに設定できます。

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

flex centering

最後に、CSS3のdisplay:flexで実装される水平方向と垂直方向のセンタリング方法を紹介します。

リーリー

効果は次のとおりです:

以上がCSS 属性を使用してさまざまな中央揃えメソッドを実装する方法の詳細なコード説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。