-
加入我們
-
VIP定制
-
求關(guān)注
Thank you for visiting
029-81773686
全網(wǎng)開發(fā)&整合營(yíng)銷服務(wù)商
CopyRight
?HOOBOO All rights reserved
2015.11.13
西安網(wǎng)頁(yè)設(shè)計(jì)小編今天要給大家來解決的是未知多行文字如何實(shí)現(xiàn)垂直居中的問題,水平居中都好說text-aline:center,或者是margin:0 auto;但是你多行文字每行都不一樣就不知道如何居中了。
如果一行文字很好解決行高就是它的高度,如果你不考慮IE6使用display來讓
模擬
就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必須設(shè)置在父元素上,后者必須設(shè)置在子元素上,因此我們要為需要定位的文本再增加一個(gè)
元素:
大容器:display:table及整體高度;小內(nèi)容:vertical-align:middle;display:table-cell;
不幸的是Internet Explorer 6 并不能正確地理解display:table和display:table-cell,因此這種方法在Internet Explorer 6及以下的版本中是無效的,還有的選擇定位,但是很多時(shí)候IE6經(jīng)常會(huì)碰到很多的問題,今天居中了,明天又不居中了,很多時(shí)候我們不常用定位的。往往完美的解決方案需要很長(zhǎng)時(shí)間,但是也還是出現(xiàn)了.
![]() | #outer {height: 100%; overflow: hidden; position: relative;width: 100%;} #outer[id] {display: table; position: static;}
|
以上代碼的優(yōu)點(diǎn)是沒有bug,采用了IE不支持的2選擇器 #value[id]。不過經(jīng)過了三層才實(shí)現(xiàn)居中,過程夠曲折的。
2選擇器#value[id]相當(dāng)于選擇器#value,但是Internet Explorer不支持這種類型的選擇器。同樣地.value[class],相當(dāng)于.value,這些只有標(biāo)準(zhǔn)能讀懂。
測(cè)試:1.5、Opera9.0、IE6.0、IE5.0通過。上面的代碼不支持IE7,還需要在最下面加二句:
*+html #outer[id]{position: relative;}
*+html #middle[id]{position: absolute; }
CopyRight ? 西安宏博網(wǎng)絡(luò)科技有限公司 備案號(hào):陜ICP備10007014號(hào)-8 站點(diǎn)地圖 免責(zé)聲明:本網(wǎng)站部分資源來源于網(wǎng)絡(luò),如有侵權(quán),請(qǐng)聯(lián)系我們告知?jiǎng)h除,我們將會(huì)盡快處理,謝謝!本站不承擔(dān)任何法律責(zé)任。