text-align:以值为center为例,当前块级容器里的所有行内元素(包括img)在当前容器中横向居中,所有子块级容器里的所有行内元素在它的直接父容器中居中,不影响块级元素的位置,如例1
块级元素居中可以用 margin:*px auto;
line-height:可以用在段落中,改变多行文字之间的行距;把某容器的line-height设置与height相同的值,可以使容器中的一行内容纵向居中,仅限一行内容(不要含<br/>,块级元素前后隐含<br/>),效果如下图,对行内元素(包括img)有效,对块级元素无效,但对块级元素里的行内元素有影响,当img的高与容器高相差不大时,居中效果不明显。
例1:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href=""/> <style type="text/css"> .box{ width: 500px; height: 250px; border: 1px solid red; text-align: center; } .box *{ width: 200px; border: 1px solid green; margin: 10px 0; } span{ background-color: yellow; } .box>img{ width: 20px; } </style> </head> <body> <div class="box"> <div class="top"> ddd<br /> <span>div <a>span</a></span> <div class="little"> little </div> </div> <h1>h1</h1> <p>ppp</p> huhih<span>div span</span><br /> <img src="0731xia/images/1.gif"/> <img src="0731xia/images/1.gif"/> </div> </body> </html>