td {
text-align: center;
vertical-align: top;
}
| text-align （横方向） |
left … （左側に表示します） |
|---|---|
| center … （中央に表示します） | |
| right … （右側に表示します） | |
| justify … （両端に揃えます） | |
| vertical-align （縦方向） |
baseline … （先頭行のベースライン揃え） |
| top … （上部に表示します） | |
| middle … （中央に表示します） | |
| bottom … （下部に表示します） |
※justify の指定は、一部の古いブラウザでは対応していないようです。
※上記以外にも指定できる値がありますが、ここでは使用しないので省いています。
■justifyの指定について
※複数行に渡る長い文章の場合に、各行（最終行を除く）の右端が綺麗に揃うように単語間隔が自動的に調整されます。
※表示される内容は、letter-spacing や word-spacing プロパティの影響を受ける場合があります。
■baselineの指定について
※セル内の先頭行のベースラインを合わせます。
【ベースラインとは】
英文などの場合、例えば x と y では下辺の位置が異なります。
x 文字のように、下側にはみ出ていない文字の下辺のラインを、ベースラインといいます。
※日本語の場合はベースラインは存在しません。
■left、center、rightの指定例
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
table {
border: 2px #2b2b2b solid;
width: 100%;
height: 100px;
}
td {
border: 2px #2b2b2b solid;
width: 25%;
}
#example1 { text-align: left; }
#example2 { text-align: center; }
#example3 { text-align: right; }
-->
</style>
</head>
<body>
<table>
<tr>
<td>デフォルト</td>
<td id="example1">左寄せ</td>
<td id="example2">中央揃え</td>
<td id="example3">右寄せ</td>
</tr>
</table>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| デフォルト | 左寄せ | 中央揃え | 右寄せ |
■justifyの指定例
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
table, td {
border: 2px #2b2b2b solid;
}
#example4 { text-align: justify; }
-->
</style>
</head>
<body>
<table>
<tr>
<td>英文は単語の区切りで改行が ...</td>
<td id="example4">英文は単語の区切りで改行が ...</td>
</tr>
</table>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
※ブラウザの幅を動かすと違いが分かりやすいです。
| 英文は単語の区切りで改行が入るため、行頭や行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。English can be beautifully arranged by specifying justify though might beautifully become complete neither the head of line nor the end of line because changing line enters by delimiting the word. | 英文は単語の区切りで改行が入るため、行頭や行末が綺麗に揃わない場合がありますが、justifyを指定しておくと綺麗に揃えることができます。English can be beautifully arranged by specifying justify though might beautifully become complete neither the head of line nor the end of line because changing line enters by delimiting the word. |
■top、middle、bottomの指定例
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
table {
border: 2px #2b2b2b solid;
width: 100%;
height: 100px;
}
td {
border: 2px #2b2b2b solid;
width: 25%;
}
#example5 { vertical-align: top; }
#example6 { vertical-align: middle; }
#example7 { vertical-align: bottom; }
-->
</style>
</head>
<body>
<table>
<tr>
<td>デフォルト</td>
<td id="example5">上揃え</td>
<td id="example6">中央揃え</td>
<td id="example7">下揃え</td>
</tr>
</table>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| デフォルト | 上揃え | 中央揃え | 下揃え |
■baselineの指定例（上揃えとの比較）
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
table, td {
border: 2px #2b2b2b solid;
}
#example8 td { vertical-align: baseline; }
#example9 td { vertical-align: top; }
-->
</style>
</head>
<body>
<table id="example8">
<tr>
<td>abcdefg</td>
<td>hijklmn</td>
<td style="font-size: 250%;">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>
<table id="example9">
<tr>
<td>abcdefg</td>
<td>hijklmn</td>
<td style="font-size: 250%;">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| abcdefg | hijklmn | opqrstu | vwxyz |
| abcdefg | hijklmn | opqrstu | vwxyz |
