text-align: ***; vertical-align: ***;
text-align は水平方向、 vertical-align は垂直方向の揃え方を指定するプロパティです。
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: 100%;
height: 100px;
border: 2px #2b2b2b solid;
}
td {
width: 25%;
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>
<td class="example1">左寄せ</td>
<td class="example2">中央揃え</td>
<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>hijklmn</td>
<td class="exampleCell">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>
<table class="example9">
<tr>
<td>abcdefg</td>
<td>hijklmn</td>
<td class="exampleCell">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>
</body>
</html>
表示例
abcdefg | hijklmn | opqrstu | vwxyz |
abcdefg | hijklmn | opqrstu | vwxyz |
- サイト内検索