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.

* Some parts of this feature may have varying levels of support.

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

/* 关键字值 */
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: 行内内容向左侧边对齐。
right: 行内内容向右侧边对齐。
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

浏览器兼容性

参见

margin:auto、margin-left:auto、vertical-align