1. 程式人生 > >CSS:多個DIV在同一行居中顯示的一種實現方法

CSS:多個DIV在同一行居中顯示的一種實現方法

在專案開發中,畫面經常有多個DIV的內容顯示在一行的要求。

比如HTML

<div class="div_allinline">
	<div class="subdiv_allinline">
	 你好,這是div1的第一行。
         <br>你好,這是div1的第二行
       </div>
	<div class="subdiv_allinline">
	 你好,這是div2的第一行。
       </div>
       <div class="subdiv_allinline">
	 你好,這是div3的第一行。
         <br>你好,這是div3的第二行
       </div>
</div>

怎麼居中顯示在一行呢?使用inline-block來做這個處理。
<style type="text/css">

.div_allinline
{
    text-align:center;
    margin:0 auto;
    padding:0;
    clear:both;
 }

.subdiv_allinline
{
    margin:0;
    padding:0;
    display:inline-block;
    _display:inline;
    *display:inline;
    zoom:1;
}
</style>

IE6,IE7中不支援inline-block,所以針對IE6,IE7寫了下面的三個屬性。

    _display:inline;
    *display:inline;
    zoom:1;

這樣貌似就主流的瀏覽器裡面都能夠正常顯示。div的寬度可以根據情況設定。