6.1 プロパティ text-align
テキストの整列 — これはウェブページのスタイリングにおける、ほぼ最も重要な側面で、テキストがコンテナ内でどのように配置されるかをコントロールできるんだ。CSSでは、テキストを整列させるために主に2つのプロパティが提供されていて、それが text-align と vertical-align なんだ。これらのプロパティを使うと、テキストの水平および垂直の整列をそれぞれ管理できるよ。
text-align プロパティは、ブロック要素内のテキストの水平整列を管理するよ。
その要素の境界に対して、テキストがどのように整列するかを決めるんだ。
値
left: テキストを左端に整列（左から右へのテキストのデフォルト）right: テキストを右端に整列（右から左へのテキストのデフォルト）center: テキストを中央に配置justify: テキストを左右の端に整列し、言葉間にスペースを追加して全体の幅に均等に分布させるstart: テキストを開始位置（テキストの方向に応じた左または右端）に整列end: テキストを終了位置（テキストの方向に応じた右または左端）に整列
使用例：
CSS
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
HTML
<body>
<p class="left">このテキストは左端に揃っているよ。</p>
<p class="right">このテキストは右端に揃っているよ。</p>
<p class="center">このテキストは中央に配置されているよ。</p>
<p class="justify">このテキストは幅に合わせて整列されているよ。テキストがコンテナの全幅を占めるように伸ばされるよ。</p>
</body>
6.2 プロパティ vertical-align
vertical-align プロパティは、親のベースラインに対する要素の垂直整列を管理するんだ。
主に、画像やテキスト列、テーブルなどのインライン要素を、テキストや他のコンテナ内で垂直方向に整えるために使われることが多いよ。
値：
baseline: 親のベースラインに対して整列（デフォルトの値）sub: 下付きインデックスとして整列super: 上付きインデックスとして整列text-top: 親のフォントの上端に整列text-bottom: 親のフォントの下端に整列middle: 親の中央に整列top: コンテナの上端に整列bottom: コンテナの下端に整列- パーセンテージ値: 行の高さに対する指定された割合で要素をオフセット
使用例：
CSS
.container {
height: 100px;
border: 1px solid #000;
}
.baseline {
vertical-align: baseline;
}
.sub {
vertical-align: sub;
}
.super {
vertical-align: super;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
.middle {
vertical-align: middle;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
.percent-50 {
vertical-align: 50%;
}
HTML
<body>
<div class="container">
<span class="baseline">baseline</span>
<span class="sub">sub</span>
<span class="super">super</span>
<span class="text-top">text-top</span>
<span class="text-bottom">text-bottom</span>
<span class="middle">middle</span>
<span class="top">top</span>
<span class="bottom">bottom</span>
<span class="percent-50">50%</span>
</div>
</body>
GO TO FULL VERSION