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>
より、詳しい中央配置情報
