Perl Web開発者のHTML・CSS入門

text-align - テキストの左寄せ、中央寄せ、右寄せ - CSS入門【CSS3対応】

テキストを左寄せ、中央寄せ、右寄せにするにはtext-alignをスタイルシート(CSS)に設定します。

<div style="text-align:left;background:#eef;">
  左寄せ
</div>
<br>
<div style="text-align:center;background:#eef;">
  中央寄せ
</div>
<br>
<div style="text-align:right;background:#eef;">
  右寄せ
</div>

要素の左寄せ、中央寄せ、右寄せ

要素が、インライン要素、インラインブロック要素であれば、text-alignで左寄せ、中央寄せ、右寄せができます。

インライン要素 - imgタグ

インライン要素であるimgタグは、text-alignで左寄せ、中央寄せ、右寄せができます。

<div style="text-align:center;background:#eef;">
  <img src="/images/webdesign-logo.png">
</div>

インラインブロック要素 - buttonタグ

インラインブロック要素であるbuttonタグは、text-alignで左寄せ、中央寄せ、右寄せができます。

<div style="text-align:center;background:#eef;">
  <button>ボタン</button>
</div>