DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS使未知高度DIV垂直居中
CSS使未知高度DIV垂直居中
編輯:CSS詳解     
  • CSS垂直方向上的居中,盡管CSS有vertical-align屬性,但是並不能有效解決未知高度的垂直居中問題,如果在一個DIV標簽裡有未定義高度的文字或圖片,那就更不好弄了)。

    在一些標准浏覽器如Mozilla, Opera, Safari.,可將父級元素顯示方式設定為TABLE(display: table;) ,內部子元素定為table-cell (display: table-cell),通過vertical-align特性使其垂直居中,但非標准浏覽器是不支持的。

    非標准浏覽器只能在子元素裡設距頂部50%,裡面再套個元素距頂部-50% 來抵消。就像下面的代碼,可解決使用vertical-align屬性不能解決的垂直居中問題:

    CSS代碼部分:

    1 body {padding0margin0;} 2 body,Html{height100%;} 3 #outer {height100%overflowhiddenpositionrelative;width100%background:ivory;} 4 #outer[id] {display: table; positionstatic;} 5 #middle {positionabsolutetop50%;} 6 #middle[id] {displaytable-cellvertical-alignmiddlepositionstatic;} 7 #inner {positionrelativetop-50%;width400px;margin0 auto;} 8 div.greenBorder {border1px solid greenbackground-color: ivory;}

    DIV部分:

    1 <div id="outer"> 2   <div id="middle"> 3       <div id="inner" class="greenBorder"> 4       </div> 5   </div> 6 </div>

    本方法兼容性也是很不錯的,只不過有些麻煩,但各大浏覽器的兼容性我們又沒法控制,所以就湊合吧,總比沒有解決辦法要好得多。本文不涉及水平方向上的居中,水平方向上當然比較容易些,可以margin:auto試一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved