【CSS】display:inline-blockを中央寄せする方法

display:inline-blockはブロック要素とインライン要素の特徴を合わせ持つ要素です。

そして中央寄せといえばブロックならmargin:auto、インラインなら親にtext-align:centerです。

「inline-blockが中央寄せできない!?inline-blockを中央寄せするにはどうするの？」

display:inline-blockを中央寄せする方法を解説します。

【結論】親にtext-align:center

display:inline-blockを中央寄せするにはインライン要素同様、親にtext-align:centerを指定します。

<style>
.example{
    /*コレ*/text-align: center;
    border: 1px solid #333;
    background: #cfeafa;
}
.example>div{
    /*コレ*/display: inline-block;
    padding: 10px;
    margin: 10px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example">
    <div>inline-block</div>
</div>

justify-content:centerで左右中央寄せ

justify-content:centerをdisplay:flexとセットで使うと子要素を左右中央寄せできます。

この場合、子要素がブロックでもインラインでもinline-blockでも関係なく中央寄せ可能です。

<style>
.example2{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    border: 1px solid #333;
    background: #cfeafa;
}
.example2>div{
    display: inline-block;
    padding: 10px;
    margin: 10px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example2">
    <div>inline-block</div>
</div>

align-items:centerで上下中央寄せ

align-items:centerをdisplay:flexとセットで使うと子要素を上下中央寄せできます。

justify-content: centerとあわせることで上下左右中央寄せができます。

<style>
.example3{
    /*コレ追加*/align-items: center;
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    height: 200px;
    border: 1px solid #333;
    background: #cfeafa;
}
.example3>div{
    display: inline-block;
    padding: 10px;
    margin: 10px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example3">
    <div>inline-block</div>
</div>

【まとめ】inline-blockを中央寄せする方法

inline-blockは親にtext-align:centerで左右中央寄せ

justify-content:centerなら要素関係なく左右中央寄せ

align-items:centerなら要素関係なく上下中央寄せ

以上、display:inline-blockを中央寄せする方法でした。