文字を中央に寄せる方法 | HTML+CSS

スポンサーリンク
LINEで送る
Pocket

HTMLにおいて文字を中央に表示するいくつかの方法を紹介。

文字の中央配置

文字を中央に配置

文字を中央に配置する

<p style="text-align: center;">文字を中央に配置する</p>

text-align: centerで指定すればよい。子(“文字を中央に配置する”)に当たる文字を中央に配置するという意味。子の文字をどう配置するかということ。

テーブル内の文字を中央に配置

テーブル内の文字を中央に配置する
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%; background-color: #67b44a; text-align: center;">テーブル内の文字を中央に配置する</td>
</tr>
</tbody>

こちらも同様にtext-align: centerで指定

text-alignは孫に影響するかどうか

孫にあたる
<div style="width: 100%; height: 50px; background-color: #67b44a; text-align: center;">
  <div style="width: 40%; background-color: #EEEEEE;">孫にあたる</div>
</div>

緑の枠で中央指定した影響は、子の白い枠の子の「孫にあたる」の文字にまで影響している。ここでは灰色(EEEEEE)の枠(ブロックレベル要素である<div>)が中央に寄っていないことにも注意してください。枠を中央に表示するには以下のようにします。

画像・インライン要素の中央配置

text-alignはimgに影響するか

<div style="width: 100%; background-color: #67b44a; text-align: center;">
  <div style="width: 40%; background-color: #ffffff;">
    <img src="アドレス" alt="" />
  </div>
</div>

影響していることが分かる。「text-align」はテキストに限定されません。画像を中央に配置したい場合は、親でtext-align: center;と指定することとなります。インライン要素は影響するということ。

text-alignで中央配置するもの(親で指定する)

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite><code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong><sub><sup>、<textarea>、<tt>、<u>、<var>

気を付けるものは、<img>くらいではないでしょうか。

DIV・ブロックレベル要素の中央配置

DIVを中央に配置するには

画像タグIMGなどはインライン要素と呼びますが、それ以外のDIVといったブロック要素を中央に配置するにはどうしたらよいでしょうか。

<div style="width: 100%; background-color: #67b44a; text-align: center;">
  <div style="width: 40%; background-color: #ffffff; margin: 0 auto;">
    <img src="アドレス" alt="" />
  </div>
</div>

中央に配置したいロックレベル要素そのものに、margin: 0 auto; と記述します。こうすることでブロック要素そのものを中央に配置することができます。

上記「text-alignは孫に影響するかどうか」について灰色部分を中央配置するには以下のようにします。

孫にあたる
<div style="width: 100%; height: 50px; background-color: #67b44a; text-align: center;">
  <div style="width: 40%; background-color: #EEEEEE; margin: 0 auto;">孫にあたる</div>
</div>

margin: 0 auto;で中央配置するもの

ブロックレベル要素が該当します。

<address>、<blockquote>、<center>、<div><dl>、<fieldset>、<form>、<h1>~<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre><table><ul>

より、詳しい中央配置情報

縦と横に中央寄せ(中央配置)する方法 コピペで使えるHTML+CSS
インライン要素、ブロックレベル要素それぞれについての横方向と縦方向の中央配置の実装方法。margin:auto;やtransform、translateを利用した汎用性の高い実装方法を解説します。vertical-alignやcenter要素は使用しません。
LINEで送る
Pocket

タイトルとURLをコピーしました