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

CSSのmarginプロパティを使用した中央揃え

CSSのmarginプロパティを使用して、ブロックレベルの要素を水平方向に中央揃えできますが、その要素のCSSwidthプロパティを設定する必要があります。

CSSマージンプロパティを使用して要素を中央に配置する例を見てみましょう-

例

<!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プロパティを使用した中央揃え

CSSマージンプロパティを使用して要素を中央に配置する別の例を見てみましょう-

例

<!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プロパティを使用した中央揃え


  1. CSSのoutline-widthプロパティ

    overlay-widthプロパティは、要素の境界の周りに特定の太さの線を描画するように定義できますが、borderプロパティとは異なり、アウトラインは要素の寸法の一部ではありません。 構文 CSSのoutline-widthプロパティの構文は次のとおりです- Selector {    outline-width: /*value*/ } 注- アウトラインスタイルプロパティは、アウトライン幅を宣言する前に定義する必要があります。 アウトライン幅プロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <hea

  2. CSSのborder-colorプロパティ

    CSSのborder-colorプロパティは、要素の境界線の色を指定するために使用されます。また、border-top-color、border-right-color、border-left-color、border-right-colorプロパティを使用して、個々の辺の色を設定することもできます。 構文 CSSborder-colorプロパティの構文は次のとおりです- Selector {    border-color: /*value*/ } 次の例は、CSSのborder-colorプロパティ-を示しています。 例 <!DOCTYPE html>