6.1 text-align 屬性
文本對齊 是網頁設計中幾乎最重要的一個方面，它允許你控制文本在容器中的定位。CSS 提供了兩個主要屬性來處理文本對齊：
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