CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのmarginプロパティを使った要素の中央揃え方法を徹底解説

CSSのmarginプロパティを使用すると、ブロックレベル要素を水平方向に中央揃えできます。ただし、中央揃えを機能させるには、対象要素のwidthプロパティで幅を設定しておく必要があります。

それでは、CSSのmarginプロパティを使って要素を中央揃えする具体的な例を見ていきましょう。

marginのauto値で中央揃えが機能する仕組み

margin: 10px auto;のように左右のマージンにautoを指定すると、利用可能な余白が左右に均等に分配され、要素が親要素の中央に配置されます。このテクニックが有効なのは、要素に明示的な幅が指定されている場合のみです。幅が未指定のブロックレベル要素は、デフォルトで親要素の幅いっぱいに広がってしまうため、中央に寄せる余地が生じません。

例1：marginプロパティによる中央揃え

<!DOCTYPE html>
<html>
<head>
<title>Center Alignment using CSS Margin</title>
<style>
#yinyangSymbol {
   width: 100px;
   height: 50px;
   background: #fff;
   border-color: #000;
   border-style: solid;
   border-width: 2px 2px 50px 2px;
   border-radius: 100%;
   position: relative;
}
#yinyangSymbol::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   background: #fff;
   border: 18px solid #000;
   border-radius: 100%;
   width: 14px;
   height: 14px;
}
#yinyangSymbol::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   background: #000;
   border: 18px solid #fff;
   border-radius:100%;
   width: 14px;
   height: 14px;
}
div{
   width: 50%;
   margin: 10px auto;
   border:4px solid black;
}
#text {
   border: 4px solid black;
   background-color: grey;
   color: white;
   text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div>
<div id="yinyangSymbol"></div>
</div>
<div id="text">Be Centered & Balanced</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

CSSのmarginプロパティを使った要素の中央揃え方法を徹底解説

続いて、幅の異なる複数の要素をmarginプロパティで中央揃えする例を紹介します。

例2：幅の異なる複数要素を中央揃え

<!DOCTYPE html>
<html>
<head>
<title>Center Alignment using CSS Margin</title>
<style>
.screen{
   padding: 10px;
   margin: 10px auto;
   text-align: center;
   color: white;
   border-radius: 0 0 50px 50px;
   border: 4px solid #000;
}
.screen1 {
   background-color: #f06d06;
   width: 70%;
}
.screen2 {
   background-color: #48C9B0;
   width: 50%;
}
.screen3 {
   background-color: #DC3545;
   width: 30%;
}
</style>
</head>
<body>
<div class="screen screen1">Screen 70%</div>
<div class="screen screen2">Screen 50%</div>
<div class="screen screen3">Screen 30%</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

CSSのmarginプロパティを使った要素の中央揃え方法を徹底解説

このようにmargin: 〇px auto;を活用すれば、widthさえ指定していれば、どんな幅のブロックレベル要素でも簡単に水平方向の中央揃えが実現できます。

  1. CSSのoutline-widthプロパティとは？使い方を実例付きで解説

    outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。 構文（シンタックス） CSSのoutline-widthプロパティの基本構文は以下の通りです。 セレクタ {     outline-width: /*値*/ } ポイント： outline-widthを使用する前に、必ずoutline-sty

  2. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &