【html/CSS】インライン要素を縦横中央寄せする方法

「aやspan、ただのテキストとかのインライン要素の中央寄せってどうやるんだっけ？」

インライン要素を縦横中央寄せする方法を解説します。

横の中央寄せ

text-align:center

<style>
.example{
    /*コレ*/text-align: center;
    border: 1px solid #999;
    background: #cff7f7;
    padding: 10px;
}
</style>
<div class="example">
    <span>インライン要素</span>
</div>

text-alignはブロック要素に指定し、子孫要素のインライン要素の横方向の位置調整するCSSです。

text-align:centerを指定すると中央寄せになります。

display:flexとjustify-content:center

<style>
.example2{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    text-align: center;
    border: 1px solid #999;
    background: #cff7f7;
    padding: 10px;
}
</style>
<div class="example2">
    <span>インライン要素</span>
</div>

justify-contentはdisplay:flexとセットで使い、子要素の横方向の位置調整するCSSです。

子要素はインライン要素、ブロック要素かかわらず調整できます。ただし、孫以降の要素には影響ありません。

1行のときはいいですが、2行になると中央寄せにならなくなるため「text-align: center」も指定しておきましょう。

縦の中央寄せ

vertical-align:middle

インライン要素

インライン要素

<style>
.example3 td{
    /*コレ*/vertical-align: middle;
    height: 100px;
}
</style>
<table border="1" class="example3">
    <tr>
        <td><span>インライン要素</span></td>
        <td>インライン要素</td>
    </tr>
</table>

vertical-alignをtdまたはthに指定すると子孫要素のインライン要素の縦位置を調整できます。

vertical-align:middleで上下中央寄せになります。centerではないため注意しましょう。

vertical-alignはdivに指定しても効きません。どうしてもdivに指定したいときは「display:table-cell」でtdと同じ要素にしましょう。

とはいえtable-cellは表で使うべき要素ですので、下記「display:flex」を使う方法をおススメします。

display:flexとalign-items:center

<style>
.example4{
    /*コレ*/display: flex;
    /*コレ*/align-items: center;
    height: 100px;
    text-align: center;
    border: 1px solid #999;
    background: #cff7f7;
    padding: 10px;
}
</style>
<div class="example4">
    <span>インライン要素</span>
</div>

align-itemsはdisplay:flexとセットで使い、子要素の縦方向の位置調整するCSSです。

子要素はインライン要素、ブロック要素かかわらず調整できます。ただし、孫以降の要素には影響ありません。

align-items:centerとjustify-content:center両方を指定することで上下左右中央寄せも可能です。

【まとめ】インライン要素を中央寄せする方法

横の中央寄せ

• text-align:center
• display:flexとjustify-content:center

縦の中央寄せ

• vertical-align:middle
• display:flexとalign-items:center

以上、インライン要素を縦横中央寄せする方法でした。