RazgrizLee::程式道點部落分部

網站設計排版時，最常見的就是Div或Table兩大Html Tag，
我們常常會遇到需要讓Div置中的情況，Table還好，
還可以用 align="center" 來置中，但Div就不行了，
或許你會想說用 text-align:center 就可以了，
不過，這樣只對了一半，當用FireFox或其他瀏覽器開的時候，你就會發現問題出現了



假設我們有兩個Div <div style="width:100%;border:blue 1px solid"> Outer Div <div style="width:100px;border:red 1px solid">Inner Div</div> </div> 要讓內部的Div置中,直覺我們就會設定css的 text-align:center 在IE6看起來會是正常的, 但是當你一開FireFox就會發現,置中的只有文字, 如果我們想要讓內部的Div也置中, 應該要在內部的Div設定 margin:auto 這樣不論在哪個瀏覽器看起來都會是正常的囉~ <div style="width:100%;border:blue 1px solid;text-align:center"> Outer Div <div style="width:100px;border:red 1px solid; margin:auto"> Inner Div </div> </div>


以上用 margin:auto 的方式，不只是Div可以用，Table當你遇到無法相容各種瀏覽器時也可以用

在設計的時候這個問題困擾了我好久，

所以在這裡記錄下來，提供給遇到相同問題的人