text-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

text-align CSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。

尝试一下

语法

css
/* 关键字值 */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;

/* 块对齐值（非标准语法） */
text-align: -moz-center;
text-align: -webkit-center;

/* 全局值 */
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

行内内容向左侧边对齐。

行内内容向右侧边对齐。

center

行内内容居中。

justify

文字向两侧对齐，将内容隔开，使其左右边缘与行框的左右边缘对齐，对最后一行无效。

justify-all

和 justify 一致，但是强制使最后一行两端对齐。

match-parent

和 inherit 类似，区别在于 start 和 end 的值根据父元素的 direction 确定，并被替换为恰当的 left 或 right 值。

无障碍

对于有阅读障碍等认知问题的人来说，对齐的文本产生的单词之间的间距不一致可能会出现问题。

形式定义

初始值start, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.
适用元素区块容器
是否是继承属性是
计算值as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right
动画类型离散值

形式语法

text-align = 
  start         |
  end           |
  left          |
  right         |
  center        |
  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;
}

结果

表格对齐

此示例演示在 <table> 元素上使用 text-align：

  • <caption> 设置为右对齐。
  • 前两个 <th> 元素继承 <thead> 元素上设置的 text-align: left 左对齐，而第三个元素设置为右对齐。
  • 在 <tbody> 元素内部，第一行设置为右对齐，第二行设置为居中对齐，第三行使用默认（左）对齐。
  • 在每一行中，一些单元格（c12、c31）设置为覆盖行的对齐。

HTML

html
<table>
  <caption>
    示例表格
  </caption>
  <thead>
    <tr>
      <th>列 1</th>
      <th>列 2</th>
      <th class="right">列 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;
}

结果

规范

Specification
CSS Logical Properties and Values Level 1
# text-align
CSS Text Module Level 3
# text-align-property

浏览器兼容性

BCD tables only load in the browser

参见