【HTML/CSS初心者向け】「text-align: center;」以外で文字を中央に配置する方法

皆様お疲れ様です！るーぷの2年目コーダー、三木です。

今回は、

例えばこの画像で言うと、
「1件だけお知らせのタイトルが入ります。1件だけ……」のところは
「text-align: center;」(行揃え：中央寄せ)にしないほうがいいかも。
というお話をしていきます。

「text-align: center;」がマズイ理由

画面幅が変わったり、文字数が変わるといずれ折り返しが発生します。
折り返して2行目になった文字も中央に寄るので、
コンテンツの位置によっては読みづらくなったり見栄えが悪くなります。

（見た目で分かりやすくするため、文字の領域の背景色を変更しています。）

↓文字数が変わると（画面幅が狭まると）

こうなるのを防ぎたいので、文字はデフォルトの「左寄せ」のまま、
文字数が少ない時は中央に配置される状態を目指します。

目指す挙動↓

↓文字数が増えると（画面幅が狭まると）

「text-align: center;」以外で文字を中央に配置するCSS

おすすめ度：高

「width: fit-content;」+「margin-inline: auto;」

おすすめ度：中

「display: flex;」または「display: grid;」+「margin-inline: auto;」

おすすめ度：低（文字の配置調整での使用はおすすめできません）

「position: absolute;」+「left: 50%;」+「transform: translateX(-50%);」

ひとつずつ解説します。

「width: fit-content;」+「margin-inline: auto;」

HTML

<div class=”news_wrapper”>
<p><a href=””>1回だけお知らせのタイトルが入ります。1回だけお知らせのタイトルが入ります。1回だけお知らせのタイトルが入ります。</a></p>
</div>

CSS

.news_wrapper{
  padding: 2rem 5%;
  background-color: #dadada;
}
.news_wrapper p{
  font-size: 1.8rem;
  font-weight: 700;
  background-color: #aaa;
  width: fit-content;
  margin-inline: auto;
}

pタグに「width: fit-content;」と「margin-inline: auto;」をあてます。

・「width: fit-content;」←中のコンテンツに幅を合わせる。
・「margin-inline: auto;」←左右余白をいっぱいに。
（「width: fit-content;」の代わりに「display: inline-block;」でも、コンテンツに幅を合わせられます。）

↓画面幅を縮めると

「display: flex;」または「display: grid;」+「margin-inline: auto;」

HTML

CSS

.news_wrapper{
  padding: 2rem 5%;
  background-color: #dadada;
  display: flex;
}
.news_wrapper p{
  font-size: 1.8rem;
  font-weight: 700;
  background-color: #aaa;
  margin-inline: auto;
}

.news_wrapperに「display: flex;」または「display: grid;」を、
pタグに「margin-inline: auto;」をあてます。

・「display: flex;」←中の要素を横並びにする。
・「display: grid;」←格子状にブロックで区切り、中の要素をレイアウトする。

「width: fit-content;」＋「margin-inline: auto;」と同じ挙動になりますが、
もしお知らせが2つ必要になった場合を考えると、少々おすすめ度が下がります。

(要素が二つ以上になると横並びになってしまいます。回避するには更にdivタグで囲うなどの対策が必要になります。)

「position: absolute;」+「left: 50%;」+「transform: translateX(-50%);」

HTML

CSS

.news_wrapper{
  padding: 2rem 5%;
  background-color: #dadada;
  position: relative;
}
.news_wrapper p{
  font-size: 1.8rem;
  font-weight: 700;
  background-color: #aaa;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

（.news_wrapperに「position: relative;」を、）

pタグに「position: absolute;」「left: 50%;」「transform: translateX(-50%);」をあてます。

・「position: absolute;」←親要素を基準に絶対配置を指定。（かなり自由な配置が可能。）
・「left: 50%;」←親要素を基準に左から50%の位置に。
・「transform: translateX(-50%);」←自身の横幅を基準に50%左へ移動。

おすすめできない理由は以下の画像をご覧ください。

CSS指定前。