CSS 垂直置中問題

CSS 垂直置中，如果需考慮萬惡的 IE6 ，那麼頭就大了!!
我們只能祈求 XP 電腦漸漸淘汰，大家買新電腦就不會再用它上網。

如果以美工在 DW 的操作方便性，用 apDiv 包 table 可能是目前較方便的作法。
至於 "避免用 table 排版" 的爭議，可以參考這篇 http://goliimage.pixnet.net/blog/post/26437445
我覺得大的基礎版型避免用 table 切圖即可，其他就盡量不要搞到 table 套 table 的複雜處境...原則上，就是要為日後修改的人著想，因為那個人常常是自己 Orz。。。

• table 寬度需要固定，可用 table-layout:fixed;

• 垂直置中常用 vertical-align 這篇有詳細解說 http://www.flag.com.tw/book/cento-5105.asp?bokno=F6462&id=224
• 垂直置中 DIV 內的圖片 img ，可參考 http://www.minwt.com/?p=2049，這比用 table 簡單。
• DIV 單列文字垂直置中，可以利用 vertical-align:middle;line-height: div高度; 也不用 table

div 包 table 可以利用下列 CSS

vamDiv{
}
.vamDiv table{
    table-layout:fixed;
    width:100%;
    height:100%;
}
.vamDiv table tr td{
    text-align:center;
    vertical-align:middle;
}

使用時：<div class="vamDiv"><table><tr><td>...</td></tr></div>
這時...就上下左右都置中了，不用再對 table 與 td 個別作 CSS。

順便題一下大的版型架構，DIV 置中問題: 下列的左右置中是用margin-left:半寬來配合 left:50%...

#contAdj {
    position:absolute;
    width: 1012px;
    margin-left:-506px;
    left:50%;
    height: 877px;
    margin-top: 0;
    top: 0;
    text-align: left;
    z-index: 0;
}

這方法在使用者改變瀏覽器視窗大小時，可能會有"跑位"問題，需要程式校正回來...

function AdjPosContainer()
{
    GetViewportSize();// 取得視窗顯示區大小
    if ( CB_ViewportXL < $("#contAdj").width() ) $("#contAdj").css({ "left": 0, "margin-left": 0 });
    else $("#contAdj").css({ "left": "50%", "margin-left":$("#contAdj").width()/-2+"px" });
}
$(window).resize(function(){
    AdjPosContainer();
});
// 取得視窗顯示區大小的程式如下，會搞到這樣複雜，也是不同瀏覽器的差異害的...
var CB_ViewportXL;
var CB_ViewportYL;
function GetViewportSize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined') {
        CB_ViewportXL = window.innerWidth;
        CB_ViewportYL = window.innerHeight;
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth !== 0) {
        CB_ViewportXL = document.documentElement.clientWidth;
        CB_ViewportYL = document.documentElement.clientHeight;
    }

    // older versions of IE

    else {
        CB_ViewportXL = document.getElementsByTagName('body')[0].clientWidth;
        CB_ViewportYL = document.getElementsByTagName('body')[0].clientHeight;
    }
    //document.write('<p>Your viewport width is ' + CB_ViewportXL + 'x' + CB_ViewportYL + '</p>');
}

注: 這些程式的原始出處暫時不可考，有空麻煩大家找找看了。