概要
CSSプロパティ「text-align」は、テキストのようなインラインコンテンツの水平方向の文字寄せを定義します。定義する方法は包含ブロック要素に対しておこないます。また垂直方向の位置を定義するためには vertical-align を利用する方法があります。
値
| 値 | 説明 |
|---|---|
| left | 左寄せにします |
| right | 右寄せにします |
| center | 中央寄せにします |
| justify | 均等割付にします |
| justify-all | テキストを均等割付にします |
| start | 文章の方向が左から始まる場合はleft、右から始まる場合はrightが指定されます |
| end | 文章の方向が左から始まる場合はright、右から始まる場合はleftが指定されます |
| match-parent | startとendの値が親要素のdirectionに従って計算され適切なleftかrightに置き換えられます |
実用における注意点
text-align が制御できるのはインラインコンテンツに限られるので、ブロック要素には使用することができません。インラインコンテンツを含んだブロック要素を中央寄せにする方法として、margin を使うテクニックがあり、左右のmarginをautoにすることで実現できます。
使用例
よく使用される文字寄せの例です。
<p class="center">テキストを中央寄せにします。<p>
<p class="left">テキストを左寄せにします。<p>
<p class="right">テキストを右寄せにします。<p>
<style>
p {
background-color: #def;
margin-bottom: 10px;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
</style>このプロパティを利用すると画像の位置を指定することができます。実装方法としては、まず画像となる<img>タグをブロック要素の<div>タグで包みます。そして、包んだ<div>タグに寄せたい位置を定義します。
<div class="container">
<img class="alignnone size-thumbnail wp-image-2960" src="https://www-creators.com/wp-content/uploads/2017/10/sample-300x225.jpg" alt="sample画像" width="100" height="" />
</div>
<style>
.container {
width: 100%;
background-color: #def;
margin-bottom: 10px;
/* 画像を中央揃えにします */
text-align: center;
}
</style>