text-align: ***; vertical-align: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

text-align は水平方向、 vertical-align は垂直方向の揃え方を指定するプロパティです。

このプロパティをtd要素（th要素）に対して設定すると、セル内の文字の位置を指定することができます。


td {
text-align: center;
vertical-align: top;
}
プロパティ名 値 説明
text-align
（水平方向）		 left 左寄せ
center 中央揃え
right 右寄せ
justify 両端揃え
vertical-align
（垂直方向）		 baseline 1行目のベースラインを揃える
top 上揃え
middle 中央揃え
bottom 下揃え

vertical-align の指定がない場合は、垂直方向の中央に揃えられます。

justifyの指定について

  • 複数行に渡る長い文章の場合に、各行（最終行を除く）の右端が綺麗に揃うように単語間隔が自動的に調整されます。（英文などの場合に有効のようです）
  • 表示される内容は、letter-spacingプロパティやword-spacingプロパティの影響を受ける場合があります。

ベースラインについて

英文などの場合、例えば x と y では下辺の位置が異なります。

［ベースラインの表示例］

x 文字のように、下側にはみ出ていない文字の下辺ラインを、ベースラインといいます。

  • 日本語の場合はベースラインは存在しません。

使用例

left、center、rightの指定例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

table {
width: 250px;
border: 2px #2b2b2b solid;
}
td {
border: 2px #2b2b2b solid;
}

td.example1 { text-align: left; }
td.example2 { text-align: center; }
td.example3 { text-align: right; }

</style>

</head>
<body>

<table>
<tr>
<td>指定なし</td>
</tr>
<tr>
<td class="example1">左寄せ</td>
</tr>
<tr>
<td class="example2">中央揃え</td>
</tr>
<tr>
<td class="example3">右寄せ</td>
</tr>
</table>

</body>
</html>
表示例
指定なし
左寄せ
中央揃え
右寄せ
justifyの指定例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

table, td {
border: 2px #2b2b2b solid;
}

td.example4 { text-align: justify; }

</style>

</head>
<body>

<table>
<tr>
<td>英文は単語の区切りで改行が ...</td>
<td class="example4">英文は単語の区切りで改行が ...</td>
</tr>
</table>

</body>
</html>
表示例
英文は単語の区切りで改行が入るため、行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。The text-align property specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side. 英文は単語の区切りで改行が入るため、行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。The text-align property specifies the horizontal text alignment. The justify value adjust the spaces between the words to justify both left and right side.
  • ブラウザの幅を動かすと違いが分かりやすいです。
top、middle、bottomの指定例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

table {
width: 100%;
height: 100px;
border: 2px #2b2b2b solid;
}
td {
width: 25%;
border: 2px #2b2b2b solid;
}

td.example5 { vertical-align: top; }
td.example6 { vertical-align: middle; }
td.example7 { vertical-align: bottom; }

</style>

</head>
<body>

<table>
<tr>
<td>指定なし</td>
<td class="example5">上揃え</td>
<td class="example6">中央揃え</td>
<td class="example7">下揃え</td>
</tr>
</table>

</body>
</html>
表示例
指定なし 上揃え 中央揃え 下揃え
baselineの指定例 （上揃えとの比較）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

table {
height: 100px;
border: 2px #2b2b2b solid;
}
td {
border: 2px #2b2b2b solid;
}

table.example8 td { vertical-align: baseline; }
table.example9 td { vertical-align: top; }

td.exampleCell {
font-size: 250%;
}

</style>

</head>
<body>

<table class="example8">
<tr>
<td>abcdefg</td>
<td class="exampleCell">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>

<table class="example9">
<tr>
<td>abcdefg</td>
<td class="exampleCell">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>

</body>
</html>
表示例
abcdefg opqrstu vwxyz
abcdefg opqrstu vwxyz