标签：
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>
标签：
原文地址：http://www.cnblogs.com/Cassiel-685/p/4383211.html
