【HTML/CSS】text-align,vertical-alignの使い方

こんにちは。駆け出しプログラマーの松下です！

HTMLで文字や画像の位置を変えたいときに使えるプロパティを紹介します。

HTMLを学び始めたばかりという方の参考になれば幸いです！

text-alignとは

text-alignプロパティは、文字や画像を右や左、中央などに位置を揃える時に使う、横方向の揃え方を指定するCSSのプロパティです。

{text-align:値;}とCSSファイルに記述し、値にはテキストを左に配置する場合はleft、右にはrightという要領で入力します。

左から右へ書く言語の場合、デフォルトはleft値になっています。

<h1>左に寄せる</h1>
 
<h2>右に寄せる</h2>
 
<h3>真ん中に寄せる</h3>

h1{text-align:left;}
 
h2{text-align:right;}
 
h3{text-align:center;}

画像を寄せる

text-alignプロパティは、インライン要素に対して使うことはできません。

imgタグはインライン要素なので、画像に適用したいときは<div>で囲ってブロック要素に変換します。

<div class="gazou">
 <img src="ねこ.jpg" width="150" height="250" alt="">
</div>

.gazou{text-align:right;}

縦方向に位置を揃えたいとき

縦方向の位置を変えたいときは、vertical-alignプロパティを使います。

基本的にインライン要素に適用し、行ボックスの高さの範囲内での縦方向の位置を指定します。

<span class="big">テキスト</span>
指定なしで表示
<span class="test1">topで表示</span>
<span class="test2">bottomで表示</span>

.big{font-size:80px;}

.test1{vertical-align:bottom;}

.test2{vertical-align:top;}

関連記事リンク:【HTML/CSS】divタグの使い方