text-align
Baseline 广泛可用 *
text-align CSS 属性设置块级元素或表单单元格框的行内级内容的水平对齐方式。也就是说，它的作用类似于 vertical-align，但方向是水平的。
试一试
text-align: start;
text-align: end;
text-align: center;
text-align: justify;
<section id="default-example">
<div id="example-element">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
</div>
</section>
section {
font-size: 1.5em;
}
#default-example > div {
width: 250px;
}
语法
css
/* Keyword values */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;
/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;
/* Global values */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;
text-align 属性被指定为下面列表中的单个关键字。
值
start-
如果书写方向是从左到右，则等同于
left；如果书写方向是从右到左，则等同于right。 end-
如果书写方向是从左到右，则等同于
right；如果书写方向是从右到左，则等同于left。 left-
行内内容向行框的左侧边缘对齐。
right-
行内内容向行框的右侧边缘对齐。
center-
行内内容在行框内居中对齐。
justify-
行内内容两端对齐。通过调整内容之间的间距，使其左右边缘与行框的左右边缘对齐，但最后一行除外。
match-parent-
与
inherit类似，但start和end的值是根据父元素的direction计算的，并替换为相应的left或right值。
无障碍
两端对齐文本所造成的单词间距不一致，可能会给患有阅读障碍等认知问题的用户带来困扰。
正式定义
正式语法
text-align =
start |
end |
left |
right |
center |
<string> |
justify |
match-parent |
justify-all
示例
起始对齐
HTML
html
<p class="example">
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
css
.example {
text-align: start;
border: solid;
}
结果
居中对齐的文本
HTML
html
<p class="example">
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
css
.example {
text-align: center;
border: solid;
}
结果
使用“justify”的示例
HTML
html
<p class="example">
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
css
.example {
text-align: justify;
border: solid;
}
结果
表格对齐
此示例演示了 text-align 在 <table> 元素上的使用。
<caption>被设置为右对齐。- 前两个
<th>元素继承了在<thead>上设置的text-align: left，因此是左对齐，而第三个被设置为右对齐。 - 在
<tbody>元素中，第一行被设置为右对齐，第二行被设置为居中对齐，第三行使用默认的（左）对齐方式。 - 在每一行中，一些单元格（c12、c31）被设置为覆盖该行的对齐方式。
HTML
html
<table>
<caption>
Example table
</caption>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th class="right">Col 3</th>
</tr>
</thead>
<tbody>
<tr class="right">
<td>11</td>
<td class="center">12</td>
<td>13</td>
</tr>
<tr class="center">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr id="r3">
<td class="right">31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>
CSS
css
table {
border-collapse: collapse;
border: solid black 1px;
width: 250px;
height: 150px;
}
thead {
text-align: left;
}
td,
th {
border: solid 1px black;
}
.center {
text-align: center;
}
.right,
caption {
text-align: right;
}
结果
规范
| 规范 |
|---|
| CSS 逻辑属性和值第 1 级 # text-align |
| CSS Text Module Level 3 # text-align-property |
浏览器兼容性
加载中…