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 |
瀏覽器相容性
載入中…