vertical-align の概要
CSSプロパティ｢vertical-align｣は、テキストや画像などのインライン要素、またはテーブルセル要素の縦方向の表示位置を指定する際に使用します。このプロパティは｢div｣などのブロックレベル要素には適用できませんので、注意が必要です。
<div>
<img class="center" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="80px">
猫がくつろいでいますね
</div>
<style>
.center {
vertical-align: middle;
}
</style>また、横方向の位置を指定する場合はCSSプロパティ ｢text-align｣ を使用します。
取りうる値
指定できる値はキーワードや数値でも指定することができます。
{ vertical-align: キーワードまたは数値; }指定できる値と説明の一覧です。インライン要素のみというのは、テーブルセルへの指定ができないことを意味しています。
| 値 | 説明 |
|---|---|
| baseline | 初期値です。ベースラインに揃えます |
| top | 上端に揃えます |
| middle | 中央に揃えます |
| bottom | 下端に揃えます |
| text-top | テキストの上端に揃えます（インライン要素のみ） |
| text-bottom | テキストの下端に揃えます（インライン要素のみ） |
| super | 上付き文字として揃えます。（インライン要素のみ） |
| sub | 下付き文字として揃えます。（インライン要素のみ） |
| 数値 | ベースラインを基準に、pc, emなどの単位で指定した値の分だけ移動します。小数点やマイナスの値も指定可能です |
| パーセント | ベースラインを基準に移動パーセントの分だけ移動します。基準値はline-heightプロパティによる行ブロックの高さです |
またベースラインとは以下の基準点を意味します。
各値の表示例
代表的な値の表示例です。画像とテキストの組み合わせで確認していきます。
topの指定
<div>
<img class="top" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="80px">
猫がくつろいでいますね
</div>
<style>
.top {
vertical-align: top;
}
</style>middleの指定
<div>
<img class="middle" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="80px">
猫がくつろいでいますね
</div>
<style>
.middle {
vertical-align: middle;
}
</style>bottomの指定
<div>
<img class="bottom" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="80px">
猫がくつろいでいますね
</div>
<style>
.bottom {
vertical-align: bottom;
}
</style>使用例
見出しやリスト要素などで、装飾アイコンとテキストの組み合わせるデザインなどで利用したケースです。
<p>好きな動物リストです</p>
<ul>
<li class="anim1"><img class="middle" src="https://www-creators.com/wp-content/uploads/2017/12/css_list_icon1.png">ペンギン</li>
<li class="anim2"><img class="middle" src="https://www-creators.com/wp-content/uploads/2017/12/css_list_icon2.png">オオカミ</li>
<li class="anim3"><img class="middle" src="https://www-creators.com/wp-content/uploads/2017/12/css_list_icon3.png">ニワトリ</li>
</ul>
<style>
* {
margin: 0;
padding: 0;
}
ul {
background: #eef;
}
li {
list-style: none;
margin: 5px;
vertical-align: middle;
font-size: 12px;
}
.middle {
margin-right: 8px;
vertical-align: middle;
}
</style>