text-align

**text-align** CSS 属性设置块级元素或表格单元格盒内内联级内容的水平对齐方式。这意味着它的作用类似于 vertical-align，但方向是水平的。

试一试

语法

css

/* Keyword values */
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;

/* 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: 内联内容是两端对齐的。将内容间隔开，使其左右边缘与行框的左右边缘对齐，但最后一行除外。
justify-all: 与 justify 相同，但还强制最后一行两端对齐。
match-parent: 类似于 inherit，但 start 和 end 值根据父元素的 direction 计算，并替换为相应的 left 或 right 值。

无障碍访问

两端对齐文本产生的单词之间不一致的间距对于患有认知障碍（如阅读障碍）的人来说可能存在问题。

正式定义

初始值	`start`，或一个无名值，如果 `direction` 为 `ltr`，则充当 `left`；如果 `direction` 为 `rtl`，则充当 `right`；如果浏览器不支持 `start`。
应用于	块级容器
继承	是
计算值	如指定，但 `match-parent` 值根据其父元素的 `direction` 值计算，并导致计算值为 `left` 或 `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>
    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 文本模块级别 3 # text-align-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

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