第十章 CSS段落文字

浏览数：47 / 时间：2015年06月09日

1、段落的水平对齐方式

在CSS中段落的水平对齐是通过属性Text-align来控制的，它的值可以设置为左、中、右和两端对齐等。

<html>
<head>
<title>水平对齐</title>
<style>
<!--
p{ font-size:12px;}
p.left{ text-align:left;}
p.right{ text-align:right;}
p.center{ text-align:center;}
p.justify{ text-align:justify;}  /*两端对齐*/
-->
</style>
</head>
<body>
<p class="left"> 这个段落采用左对齐的方式，text-align：left，因此文字都采用左对齐。<br />
床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。<br />李白</p>
<p class="right"> 这个段落采用右对齐的方式，text-align：right，因此文字都采用右对齐。<br />
床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。<br />李白</p>
<p class="center"> 这个段落采用居中对齐的方式，text-align：center，因此文字都采用居中对齐。<br />
床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。<br />李白</p>
<p class="justify"> 这个段落采用两端对齐的方式，text-align：justify，因此文字都采用两端对齐。<br />
床前明月光，疑是地上霜。<br />举头望明月，低头思故乡。<br />李白</p>
</body>
</html>

2、段落的垂直对齐方式

在CSS中段落文字的垂直对齐方式是通过vertical-align属性来具体实现的。对于文字本身而言，该属性对于块级元素并不起作用，例如<p>和<div>等标记。但对于表格而言，这个属性则显得十分重要。

<html>
<head>
<title>垂直对齐</title>
<style>
<!--
td.top{ vertical-align:top;}
td.bottom{ vertical-align:bottom;}
td.middle{ vertical-align:middle;}
span.zs{ vertical-align:10px;}
span.fs{ vertical-align:-10px;}
-->
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="top">垂直对齐方式，top</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="bottom">垂直对齐方式，bottom</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="middle">垂直对齐方式，middle</td>
</tr>
</table>

<p> 给对齐属性设置具体<span class="zs">数值</span>，正数</p>
<p> 给对齐属性设置具体<span class="fs">数值</span>，负数</p>
</body>
</html>