text-alignで文字や画像の位置を調整する方法

text-alignについて

テキストの行揃えや画像を左に寄せたり、真ん中に寄せたりできるtext-alignプロパティの紹介です! 使い方はとっても簡単で、ただコピペするだけ! それでは使い方などを詳しく説明していきますね。

目次
text-alignでimgの位置を移動する場合
注意点

text-alignの使い方

text-alignプロパティでは、テキストの行揃えの位置を指定できます。 ブロックレベル要素にtext-alignを設定して、対象のインライン要素に対し適用することができます。

例えばブロック要素であるpタグに「text-align:center;」というように設定したら、pタグ内のテキストは中央揃えで表示されるようになるという事です。

ちなみにtext-alignはブロック要素内のインライン要素に対しての位置揃えですので、インライン要素であるimg(画像)なども位置移動できます text-alignプロパティで指定できる値(キーワード)は次のようになってます。

キーワード 意味
left 左揃えにする
right 右揃えにする
center 中央揃えにする
justify 両端揃えにする(均等割付)
※最終行を除く
justify-all 最終行も含んで両端揃えにする
start 開始端揃えにする
※テキストの開始方向が左からなら「left」、右からなら「right」と同じ
end 終了端揃えにする
※テキストの開始方向が左からなら「right」、右からなら「left」と同じ
start end 1行目及び強制改行直後の行は開始端揃え。それ以外の行は終了端揃えとなる
match-parent 親要素のプロパティ値を、対象要素の書き出し方向に合わせて適用する

表示例

.sample{ text-align: left; }
.sample{ text-align: right; }
.sample{ text-align: center; }
.sample{ text-align: start; }
.sample{ text-align: end; }
left
right
center
start
end

justify(均等割付)について

均等割付のjustifyを使う場合は、同時にtext-justifyプロパティで均等割付の形式も指定しなければならないようです。 ですのでtext-alignでjustifyを設定する際は、text-justifyプロパティも一緒に記述しましょう。

text-justifyで指定できる値は次のようになってます。

タイトル タイトル
auto ブラウザに依存
distribute 単語・文字間隔を調整して均等割付
distribute-all-lines 単語・文字間隔を調整し均等割付
(文字数が1行に満たない行も)
inter-cluster 単語間隔を持ってないテキスト(アジア言語など)の均等割付
inter-ideograph 表意文字(日本語・中国語など)の単語・文字間隔を調整し均等割付
inter-word 単語間隔を調整し均等割付
kashida アラビア文字の均等割付
newspaper 単語・文字間隔を調整し均等割付(英文・ラテンアルファベット向け)

記述例

.sample{
  text-align:justify;
  text-justify: distribute;
}

text-alignでimgの位置を移動する場合

text-alignでimg(画像)の位置を移動したい場合は、imgの親要素にtext-alignを設定しましょう。 img自体にtext-alignを設定しても反映されませんので注意して下さい。

それと「text-alignを設定したのにimgの位置が移動しないよ」って時は、imgにdisplay:block;が設定されてる可能性があります。 その場合は下のようにimgを「inline」にして下さい。

img{
  display:inline;
}

表示・記述例

<div class="sample1">
  <img src="sample.jpg">
</div>

<div class="sample2">
  <img src="sample.jpg">
</div>

<div class="sample3">
  <img src="sample.jpg">
</div>
.sample1{
  text-align:left;
}
.sample2{
  text-align:center;
}
.sample3{
  text-align:right;
}
sample-senyou
sample-senyou
sample-senyou

注意点

簡単に位置移動できるtext-alignですが、基本的にはテキストに対する指定になります。 なのでdivなどのブロック要素やテーブルなどの全体の配置を移動する事はできません

ブロック要素の配置を指定したい場合は「margin:0 auto;」「float」「position」などを使うようにしましょう。

とりあえずtext-alignは「テキストの行揃え」したい時に使うものだと覚えておいて下さいね(^^♪