WEB制作を始めたばかりのうちはtext-alignが効かない！ということがよくあります。

結論から言うとtext-alignが効かないのは、text-alignをかける場所が違うからです。

text-alignが効かない場合は以下のように指定すれば解決します。

• span要素の親要素にtext-alignを指定する
• span要素にdisplay:block;を指定する

この方法で確実にtext-alignが効くようになりますが、きちんと理解したい人は今回の記事を読んでみてください。

text-alignとは

text-alignはCSSのセレクタ名です。

ブロック要素にtext-alignを指定することでテキストの横の位置を指定できます。

例えばこんな感じ

/* テキストを真ん中寄せ */
p {
	text-align: center;
}

/* テキストを右寄せ */
p {
	text-align: right;
}

/* テキストを均等配置 */
p {
	text-align: justiry;
}

しかし、WEB制作を学んでいるとtext-alignが効かない！ということがあります。

なぜ効かないのか

HTMLタグは要素によって、「display」の初期値が違います。

段落に使用する「pタグ」のdisplayの初期値は「block」ですが「aタグ」や「spanタグ」などのフレージングコンテンツ（旧インライン要素）のdisplayの初期値は「inline」です。

display:block;とdisplay:inline;の違いはBOXモデルが何になっているかです。

実際に確認する

見たほうが早いので実際にお見せします。

<p>この要素はpタグです</p>
<span>この要素はspanタグです</span>

この要素はpタグです

この要素はspanタグです

色がついている場所が実際の要素です。

pタグがコンテナいっぱいまで広がっているのに対し、spanタグは要素の中身分しかないのがわかります。

では、この値に要素を真ん中にする「text-align: center;」を指定するとどうなるでしょう。

<p>この要素はpタグです</p>
<span>この要素はspanタグです</span>

p{
	text-align: center;
}

span{
	text-align: center;
}

この要素はpタグです

この要素はspanタグです

pタグは真ん中に寄っていますが、spanタグは変っていないのがわかります。

これは青い中で真ん中寄せにしようとしているからです。

実際にspanタグのようなinline要素を真ん中に持ってくるには以下のやり方があります。

• span要素の親要素にtext-align: center;を指定する
• span要素にdisplay:block;を指定する

実際のコードで確認してみましょう。

span要素の親要素にtext-align: center;を指定する

<p>
	<span>この要素はspanタグです</span>
</p>

p{
	text-align: center;
}

この要素はspanタグです

spanタグの親要素である「pタグ」にtext-align: center;を指定することによりspanタグが真ん中寄せになります。

span要素にdisplay:block;を指定する

<span>この要素はspanタグです</span>

span{
	display: block;
	text-align: center;
}

この要素はspanタグです

spanタグにdisplay: block;を指定してあげてpタグと同じblock要素としてあげることでテキストを真ん中に寄せることができます。

もしかしてposition使ってない？

positionプロパティを使うと要素が浮いた状態になるのでdisplay:block;となっていても横幅がなくなってしまいます。

display:blockの要素;

p{
	text-align: center;
	position:absolute;
}

psitionを使用している要素を真ん中にしたい場合は横幅の指定をしてあげれば解決します。

display:blockの要素;

p{
	text-align: center;
	position:absolute;
	width:100%;
}

真ん中にしたい要素にpositionを使っている場合は「width:100%;」を付けてあげましょう。

覚えておくと便利inline-block

displayプロパティには「block」「inline」の他にも指定できる値があります。

「block」「inline」とセットで覚えておいたほうがいいのもとしてdisplay:inline-block;があります。

inline-blockとは「block」「inline」両方の性質を持った値で「inline」と同じように要素の中身分の幅で、「block」と同じように横幅や高さ、marginやpaddingを指定することができます。

<p>
	<span>この要素はspanタグです</span>
</p>

p{
	text-align: center;
}

span{
	display: inline-block;
	padding:25px;
}

この要素はspanタグ（inline-block）です

【CSS】マージンとパディングが効かない時の注意点と違いについて – Uptech（アップテック）

まとめ

text-alignが効かない場合は以下のことを試してみてください。

• span要素の親要素にtext-align: center;を指定する
• span要素にdisplay:block;を指定する

text-alignは「display:inline;」または「display:inline-block;」のプロパティに指定しても機能しないので注意が必要です。

「display:inline;」または「display:inline-block;」の要素をtext-alignで真ん中にするには親要素にtext-alignを指定してあげるということを覚えておきましょう。

関連する記事

【CSS】マージンとパディングが効かない時の注意点と違いについて

【一発で解決】margin 0 autoが効かない理由と意味