/* from: http://guoxuelin.cn.blog.163.com/blog/static/4917562620093405115780/ */
一、Div層居中
如果在父級元素定義TEXT-ALIGN:center;這個的意思就是在父級元素內的內容居中；對於IE這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義設定時再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。
二、Div層裏的文字垂直居中
|
首先要知道css裏vertical-align無效，W3C官方對vertical-align做了下面的解釋： “ This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.” 1、單行文字垂直居中。一個Box中由很多行很多元素組成，vertical-align只作用於在同一行內的元素，它的垂直並不是相對於整個Box而言的。比如定義了一個60px的高度，但是這個Box中存在很多行，那段文本並不能對齊到中央。如果希望那段文本對齊中間，需要給它定義一個line-height的屬性，讓line-height爲60px，即保證div高和行高保持一致，作用於一行的vertical-align就可以工作了。 CSS代碼： #div-a{height:60px; line-height:60px;} XHTML代碼： <div id="div-a">好好先生歡迎您</div> 如果還想讓div裏的文字水平居中，再加上“text-align:center;”即可；代碼如下： CSS代碼： #div-a{text-align:center; height:60px; line-height:60px;} XHTML代碼： <div id="div-a">好好先生歡迎您</div>
2、多行文字垂直居中有兩種方法。
方法一、建議在div層中嵌套table標籤，原因很簡單，在div中vertical-align無效，但在table中可以。代碼如下： <table> <tr><td style="vertical-align:middle;height:300px;background-color:ff1fff"> 在div層中嵌套table標籤<br>在div層中嵌套table標籤</td></tr> </table>
方法二、多行文字居中，且容器高度可變時，給出一致的 padding-bottom 和 padding-top 。 .middle-demo-2{ padding-top: 24px; padding-bottom: 24px; } 優點： 1. 同時支持塊級和內聯極元素 2. 支持非文本內容 3. 支持所有瀏覽器 缺點： 容器不能固定高度
三、Div層裏的圖片垂直居中。
1、背景圖片的方法。
代碼如下：body{ BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center;}
關鍵就是最後的center,這個參數定義圖片的位置。還可以寫成“top left”(左上角)或者"bottom right"等，也可以直接寫數值"50 30"。
2、嵌套table標籤。代碼如下： <div style= "height:300px;background:#DEDEDE; width:60%; ">
3、代碼如下：
<style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; height:500px; border:1px solid #666; overflow:hidden; position:relative; text-align:center; display:table-cell; vertical-align:middle;} div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; } --> </style>
4、代碼如下：
<style> .box { display: table-cell; vertical-align:middle; text-align:center; *display: block; *font-size: 175px;/*約爲高度的0.873，200*0.873 約爲175*/ *font-family:Arial;/*防止非utf-8引起的hack失效問題，如gbk編碼*/ width:200px; height:200px; border: 1px solid #eee; } .box img { vertical-align:middle; border:0;} </style> <body> <div class="box"> <a href="http://www.howpm.com" target="_blank"><img src="http://howpm.com/images/dz7/logo.gif" /></a> </div> |
