CSS 基础教程：文本（二）

Hudson 译原文

水平对齐

text-align属性设置文本的水平对齐。

该属性可以拥有的可能值如下：

start：与左对齐相同，如果方向是LTR，则右对齐；如果方向是RTL，则左对齐。
end：与右对齐相同，如果方向是LTR，则左对齐；如果方向是RTL，则右对齐。
left：与左边距对齐。
right：与右边距对齐。
center：在页面的中心对齐。
justify：与两个边距对齐。
justify-all：与justify相同，使最后一行也是对齐的。
match-parent：类似于inherit。从父级的值中取start和right的值，然后替换为left和right。

当方向为ltr时，默认对齐方式为左对齐；当方向为rtl时，默认对齐方式为右对齐。

以下是一个例子：

<html>
<head>
</head>
<body>
   <h2>文本对齐</h2>
      <p style="text-align: left;">文本左对齐。</p>
      <p style="text-align: right;">文本右对齐。</p>
      <p style="text-align: center;">文本居中对齐。</p>
      <p style="text-align: justify; border: 2px solid red; width: 200px; height: 100px;">
         文本两边对齐。此对齐方式基于左右两个边距对齐文本。
      </p>
</body>
</html>

垂直对齐

vertical-align属性用于在内联、内联块和表格单元格中垂直对齐文本。

vertical-align属性可以有以下值之一：

baseline：元素的基线与父元素的基线对齐。
sub：元素的基线降低到适合下标文本的位置。
super：元素的基线升高到适合上标文本的位置。
top：元素框的顶部与行框的顶部对齐，在内联内容的上下文中，或与表格中的单元格的顶部对齐。
text-top：元素框的顶部与行中最高的内联框的顶部对齐。
middle：元素的基线与父元素的基线加上父元素字体的x-height的一半的点对齐，在内联内容的上下文中。
bottom：元素框的底部与行框的底部对齐，在内联内容的上下文中，或与表格中的单元格的底部对齐。
text-bottom：元素框的底部与行中最低的内联框的底部对齐。
percentage：元素的基线被给定百分比的line-height属性值提升或降低。
length：元素的基线被给定长度值提升或降低。此属性允许负长度值。对于此属性，长度值为0具有与基线相同的效果。

以下是一个例子：

<html>
<head>
<style>
   table,td {height:100px; width:400px; border:1px solid red;}
</style>
</head>
<body>
   <table>
   <tr>
      <td style="vertical-align: baseline">baseline</td>
      <td style="vertical-align: top">top</td>
      <td style="vertical-align: middle">middle</td>
      <td style="vertical-align: bottom">bottom</td>
      <td>
         <p>
            No vertical alignment
         </p>
      </td>
   </tr>
   </table>
   <p>
   top:         <img style="vertical-align: top" src="images/smiley.png" alt="star"/>
   middle:      <img style="vertical-align: middle" src="images/smiley.png" alt="star"/>
   bottom:      <img style="vertical-align: bottom" src="images/smiley.png" alt="star"/>
   super:       <img style="vertical-align: super" src="images/smiley.png" alt="star"/>
   sub:         <img style="vertical-align: sub" src="images/smiley.png" alt="star"/>
   </p>

   <p>
   text-top:    <img style="vertical-align: text-top" src="images/smiley.png" alt="star"/>
   text-bottom: <img style="vertical-align: text-bottom" src="images/smiley.png" alt="star"/>
   0.2em:       <img style="vertical-align: 0.3em" src="images/smiley.png" alt="star"/>
   -1em:        <img style="vertical-align: -2em" src="images/smiley.png" alt="star"/>
   20%:         <img style="vertical-align: 30%" src="images/smiley.png" alt="star"/>
   -100%:       <img style="vertical-align: -100%" src="images/smiley.png" alt="star"/>
   </p>
</body>
</html>

CSS 基础教程： 文本（二）

CSS 基础教程： 文本（二）

水平对齐

垂直对齐

CSS 基础教程：文本（二）

CSS 基础教程：文本（二）