RYO.dev

最終更新日:

inlineな要素とinline-blockな要素を中央揃えする方法

  1. text-align: center;を使う
  2. flexを使う
  3. position: relative;を使う
  4. 需要
  5. 最後に

text-align: center;を使う

display: inline;
display: inline-block;
<div class="tac">
  <code>display: inline;</code>
</div>

<div class="tac">
  <code class="dib">display: inline-block;</code>
</div>
.tac {text-align: center;}
.dib {display: inline-block;}

/* code要素のdisplayプロパティの初期値はinlineです。また、枠線と背景色と余白を追加するCSSは省略しています。 */

displayプロパティの値がinlineまたはinline-blockである要素(以下、inline的な要素)の親要素にtext-align: center;を指定する方法です。

flexを使う

display: inline;
display: inline-block;
<div class="flex">
  <code>display: inline;</code>
</div>

<div class="flex">
  <code class="dib">display: inline-block;</code>
</div>
.flex {
  display: flex;
  justify-content: center;
}
.dib {display: inline-block;}

/* code要素のdisplayプロパティの初期値はinlineです。また、枠線と背景色と余白を追加するCSSは省略しています。 */

inline的な要素の親要素にdisplay: flex;justify-content: center;を指定する方法です。

position: relative;を使う

display: inline;
display: inline-block;
<div>
  <code class="pl">display: inline;</code>
</div>

<div>
  <code class="dib pl">display: inline-block;</code>
</div>
.pl {
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}
.dib {display: inline-block;}

/* code要素のdisplayプロパティの初期値はinlineです。また、枠線と背景色と余白を追加するCSSは省略しています。 */

inline-blockな要素にleft: 50%;position: relative;transform: translateX(-50%);を指定することで中央揃えになります。

しかし、inlineな要素に同じコードを指定しても中央揃えにはなりません。

最後に

もし誤った情報を見つけたりお聞きしたいことがあったりした場合は、TwitterのDMメールにご連絡ください。