文字の縦位置

HOMEへ
HOMEホームページ作り > 文字の縦位置

ホームページ作り−文字の縦位置

文字の縦位置をスタイルシートで設定する。

文字の縦位置の設定

tdタグやimgタグでは、文字の縦位置を設定できます。 縦位置を設定するには、下のように記述します。

td
{
  vertical-align:middle;
}

vertical-alignというのが、文字の縦位置を設定するCSS属性です。 middleは中央揃えを指定しています。 topは上端揃え、 bottomは下端揃えになります。 実際に指定すると、下のようになります。

属性値 top middle bottom
縦位置 上端揃え 中央揃え 下端揃え
img
{
  vertical-align:middle;
}

画像にvertical-alignを用いる場合は、前後の文字との縦位置関係を指定することになります。 上記の設定をすると、文字の下端を画像の中央に合せます。

top 上端揃え(top)

middle 中央揃え(middle)

baseline 文字ベースライン揃え(baseline)

txt-bottom 文字下端揃え(text-bottom)


上の画像と文字の関係を見て、ベースライン揃えが分かりにくいかもしれません。 よく見ると、画像より下に少しだけ文字が出ています。 ベースラインは、英語アルファベットなどを書くノートに引いてある、4本線の下から2番目の線です。 文字下端は4本線の一番下の線になります。下のように文字を大きくすると、違いがはっきりします。

baseline g
txt-bottom g

画像の下に謎のスペースが空くことがありますが、 その原因は画像がベースライン揃えになっていることです。 ベースライン揃えは文字が画像より下に出るので、このスペースが生じます。 画像下のスペースを消したい場合は、文字下端揃えを指定します (All About参照)。

文字の縦位置を指定するには、CSS入力補助テキストタブを開きます。 一番下に縦揃えという所があるので、そこで目的のものをコンボボックスで選択し、 挿入ボタンを押します(下図)。 なおこのページを執筆時点(HPWのVer1.26)でbottomは入力できないので、 text-bottomを入力して編集してください。

縦揃え

ページトップへ

前へ  INDEXへ