枠内のテキストの縦位置をCSSで指定する
枠内のテキストの縦位置をCSSで指定するコード紹介します。
概要
こちらの記事で紹介している通り、text-alignプロパティを利用することで、テキストの横方向の位置揃えができます。この記事では枠内でのテキストの縦位置を指定するコードを紹介します。
設定方法
枠内のテキストの縦位置を直接指定するプロパティはないため、以下の方法で設定します。
方法1 : 枠のスタイルをテーブルセルに変更し、vertical-alignプロパティを利用する
枠のスタイルをテーブルセルに変更すると、vertical-alignプロパティで縦の位置を指定できます。
CSSに下記のコードを記述して縦位置を設定します。
.TextVerticalTop {
display: table-cell;
vertical-align: top;
}
.TextVerticalBottom {
display: table-cell;
vertical-align: bottom;
}
.TextVerticalCenter {
display: table-cell;
vertical-align: middle;
}
方法2 : position:relative を利用して相対位置で指定する
枠のスタイルに
position:relativeを指定すると内部の配置位置を相対座標で指定できます。
内部に表示するテキストの位置を"50%"などの相対位置で指定します。
span.top {
position: absolute;
top: 0;
}
span.bottom {
position: absolute;
bottom: 0;
}
span.center {
position: absolute;
top: 50%;
margin-top: -0.5em;
}
プログラム例 : display: table-cell を利用する場合
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="TextAlignVerticalCell.css" />
</head>
<body>
<div class="TextVerticalTop">
この枠は上端ぞろえです。
</div>
<br />
<div class="TextVerticalBottom">
この枠は下端ぞろえです。
</div>
<br />
<div class="TextVerticalCenter">
この枠は中央ぞろえです。
</div>
</body>
</html>
.TextVerticalTop {
height:96px;
width:280px;
margin-top: 24px;
margin-left: 32px;
border: 1px solid #009347;
display: table-cell;
vertical-align: top;
}
.TextVerticalBottom {
height: 96px;
width: 280px;
margin-top: 24px;
margin-left: 32px;
border: 1px solid #009347;
display: table-cell;
vertical-align: bottom;
}
.TextVerticalCenter {
height: 96px;
width: 280px;
margin-top: 24px;
margin-left: 32px;
border: 1px solid #009347;
display: table-cell;
vertical-align: middle;
}
解説
display: table-cellを指定することで、divタグをテーブルセルとして扱います。テーブルのセルとして扱う場合、
vertical-alignプロパティが有効となるため、vertical-alignを利用して内部の文字列の縦位置を設定します。
display: table-cellを指定することで、ブロック要素ではなくなるため、divタブ終了時に改行はされませんので、改行は別途
<br />タグを記述しています。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
プログラム例 : position: relative を利用する場合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="TextAlignVertical.css" />
</head>
<body>
<div class="Frame">
<span class="top">この枠は上端ぞろえです。</span>
</div>
<br />
<div class="Frame">
<span class="bottom">この枠は下端ぞろえです。</span>
</div>
<br />
<div class="Frame">
<span class="center">この枠は中央ぞろえです。</span>
</div>
</body>
</html>
.Frame {
height: 96px;
width: 280px;
margin-top: 24px;
margin-left: 32px;
border: 1px solid #8b5285;
position: relative;
}
span.top {
position: absolute;
top: 0;
}
span.bottom {
position: absolute;
bottom: 0;
}
span.center {
position: absolute;
top: 50%;
margin-top: -0.5em;
}
解説
外側のdivタグに
position: relativeを指定し、相対座標での指定にします。テキストを上端にそろえる場合は、内部のテキストのスタイルの
topプロパティに0を指定します。テキストを枠の下端にそろえる場合は、
bottomプロパティに0を指定すします。中央にそろえる場合は
topプロパティに50%を指定します。ただし文字の左上の座標が50%の位置になるため、枠の中央に表示するにはテキストの行の高さの半分だけ上にずらす必要があり、その値が
margin-topプロパティの -0.5em になります。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
掲載日: 2018-03-05
改訂日: 2023-12-11
