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