CSSでのインラインブロック要素の中央揃え
例として、インラインブロック要素を中央に配置してみましょう:
<div class="parent">
<span class="child">text</span>
<span class="child">text</span>
<span class="child">text</span>
</div>
.parent {
text-align: center;
padding: 10px 0;
border: 1px solid red;
}
.child {
display: inline-block;
padding: 10px 20px;
border: 1px solid green;
}
:
親要素の中にいくつかのdiv要素があります:
<div class="parent">
<div class="child">text 1</div>
<div class="child">text 2</div>
<div class="child">text 3</div>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
padding: 10px;
border: 1px solid green;
}
子div要素をインラインブロック要素に変換し、水平方向のmarginを5pxに設定してから、親要素に対して水平方向に中央揃えしてください。