CSS で Div を水平方向に中央揃え
-
CSS で
margin
プロパティを使用してdiv
を水平方向に中央揃えにする -
CSS で Flexbox を使用して
div
を水平方向に中央揃えにする -
CSS で
div
をinline-block
に設定し、text-align
プロパティを使用して水平方向に中央揃えにする
![CSS で Div を水平方向に中央揃え](/img/CSS/feature-image---center-div-horizontally-css.webp)
この記事では、CSS で div
を水平方向に中央揃えにするいくつかの方法について説明します。
CSS で margin
プロパティを使用して div
を水平方向に中央揃えにする
margin
プロパティを使用すると、CSS で div
を水平方向に中央揃えできます。
margin
プロパティは、要素からの 4つの方向すべてのマージンを設定するための省略形です。このプロパティを使用して、top
、right
、bottom
、left
の順にマージンを割り当てることができます。
左右の余白に auto
オプションを使用して、div
を水平方向に中央揃えにすることができます。上マージンと下マージンは 0
に設定できます。
auto
オプションは要素を中央に配置し、左右の余白を均等に分割します。中央に配置する要素の幅を指定する必要があります。
要素は指定された幅を占め、残りの水平方向のスペースは左右に均等に分割されます。
例を見てみましょう。要素の幅が 50%
の場合、auto
プロパティは 25%
の左マージンと 25%
の右マージンを作成します。
display
プロパティを使用して、要素を table
に設定することもできます。このような場合、テーブルにコンテンツがある場合は幅を指定する必要はありません。
コンテンツの幅が使用されます。内側の div
にコンテンツを書き込まない場合は、特定の幅を指定します。
たとえば、HTML でクラス名 outerDiv
を使用して div
を作成します。次に、HTML の outerDiv
内に別の innerDiv
をネストします。
CSS で、outerDiv
クラスの width
を 100%
に、background
を blue
に設定します。次に、innerDiv
を選択し、display
プロパティを table
に設定します。
その background
を red
に、height
と width
を 10vh
と 10vw
に設定します。最後に margin
を 0 auto
に設定する。
ここで、margin
プロパティの 0
は、上下のマージンです。auto
オプションは、左右のマージン用です。CSS の margin
プロパティを使用して、div
を水平方向に中央揃えできます。
サンプルコード:
<div class="outerDiv">
<div class="innerDiv"></div>
</div>
.innerDiv {
display: table;
background:red;
height:10vh;
width:10vw;
margin: 0 auto;
}
.outerDiv {
width:100%;
background:blue;
}
CSS で Flexbox を使用して div
を水平方向に中央揃えにする
フレックスボックスのプロパティを使用して、CSS で div
を水平方向に中央揃えにすることができます。
Flexbox は、要素を垂直方向と水平方向に中央揃えする簡単な方法を提供します。フレックスを作成し、要素がフレックスボックスにどのように配置されるかを定義できます。
justify-content
プロパティを使用して、コンテンツが使用可能なスペースのすべてを使用しない場合に、フレックスボックス内のコンテンツの水平位置を指定できます。justify-content
プロパティを使用して、外側のコンテナにフレックスボックスを作成し、内側のコンテナの位置を中央に設定できます。
たとえば、innerDiv
クラスを選択し、height
および width
プロパティを 10vh
および 10vw
に設定します。背景色として black
を設定します。次に、outerDiv
クラスを選択し、width
を 100%
にします。
背景色を 100%
に設定します。次に、display
プロパティを flex
に設定して、コンテナをフレックスボックスとして作成します。その後、オプション center
を justify-content
プロパティに書き込みます。
したがって、CSS Flexbox を使用して、CSS で div
を水平方向に中央揃えにすることができます。
サンプルコード:
.innerDiv {
background:black;
height:10vh;
width:10vw;
}
.outerDiv {
width:100%;
background:pink;
display: flex;
justify-content: center;
}
<div class="outerDiv">
<div class="innerDiv"></div>
</div>
CSS で div
を inline-block
に設定し、text-align
プロパティを使用して水平方向に中央揃えにする
CSS で div
を水平方向に中央揃えする別の方法は、div
を inline-block
要素として設定することです。インラインと同様に、inline-block
要素は新しい行で開始されません。
ただし、width
と height
を設定することができます。次に、外側の div
の text-align
プロパティを使用して、内側の div
を水平方向に中央揃えにします。
内側の div
は外側の div
から text-align
プロパティを継承し、要素を中央に配置できます。
たとえば、上記の方法で、高さ、幅、背景を内側の div
に設定します。次に、display
プロパティを使用して、要素を inline-block
に設定します。
外側の div
で、幅と背景を設定します。最後に、text-align
プロパティを center
に設定します。
このようにして、CSS で div
を水平方向に中央揃えにすることができます。
サンプルコード:
.innerDiv {
background:red;
height:10vh;
width:10vw;
display:inline-block;
}
.outerDiv {
width:100%;
background:blue;
text-align:center;
}
<div class="outerDiv">
<div class="innerDiv"></div>
</div>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn