3列布局中的CSS中心元素

所以我在我的網頁上有3列布局，但是我無法獲得中間列中的東西。左側和右側的列的寬度是固定的，所以我爲中間列創建了一個容器，並將其邊框設置爲等於左側和右側列的大小。然後，我在中間容器中的div標籤上使用了margin：auto屬性，它在中間列中包含了我想要的所有內容。如果可能，我希望這可以在所有瀏覽器窗口大小上工作。這是我的CSS：3列布局中的CSS中心元素


#top 
{ 
    width:100%; 
    background-color:#FF0000; 
    height:30px; 
    overflow: auto; 
    width: 100% 

} 


#right 
{ 
    float:right; 
    width:100px; 
    background-color:#CCC; 
    height:100%; 
} 

#middleCont 
{ 
    margin-left:150px; 
    margin-right:100px; 
} 

#middle 
{ 
    margin:auto; 
    text-align:left;  
} 


#left 
{ 
    float:left; 
    width:150px; 
    height:100%; 


}

而且因爲我離不開瀏覽器渲染它由於某種原因，後置HTML，我上傳相關代碼在一個文本文件：http://www.mediafire.com/?a89kr1bb4uwb4cf

在此先感謝您的幫助。

來源

2010-12-06 user532493

你可能縮小CSS只包括與問題相關的東西 - 找到什麼是有點困難。 – Bojangles 2010-12-06 15:46:27

，我也需要HTML以及回答。 – Neutralizer 2010-12-06 15:52:56

是，一，#middle下，你說text-align: left而非text-align: center。我改變了這一點，它運作良好。

我插入不同類型的標籤到文檔中，包括p，div，，列表，表格和圖像。我注意到的唯一問題是桌子沒有居中。看了很多文章，我發現你已經實現了在CSS中建立表格的建議方法。我想也許，解決這個問題的唯一辦法是用center標籤製作一個表格或者在你的CSS文件中創建一個新的文本塊。

你可以做你喜歡的，但是推薦的方法是這樣的：

#center { 
    margin: auto; 
}

然後，讓一個新表#center作爲其ID。

<table id="center"> 
    ... 
</table>

如果您選擇使用center標籤，你實現這樣的：

<center> 
    <table> 
    ... 
    </table> 
</center>

希望我幫一點。祝你好運。

來源

2011-01-10 05:26:17 Abluescarab

我想你可以改變text-align:left到text-align:center的選擇#middle

如果你想使用的#middle方法margin:0 auto（而不是margin:auto因爲你擁有它），那麼你必須設置一個固定的寬度，類似width:400px;或width:20%;。

來源

2010-12-06 16:11:02 Sotiris

如果你想有一個固定寬度的中心柱然後

#middle 
/*this will keep the column width constant wile letting the space on either side expand*/ 
{ 
    margin:auto; 
    text-align:left; 
    width: 600px; /* what ever width you want */ 
}

或指定固定的利潤率

#middle 
/*this wil keep the space on either side constant wile letting the column expand*/ 
{ 
    margin-left: 150px; /*to center column just keep the left and right margins equal*/ 
    margin-right: 150px; 
    text-align:left; 
}

我希望這能回答你的問題。

P.S.如果你也發佈了html，它會有所幫助。

來源

2010-12-07 10:02:47 Daniel

我不知道我是否完全按照您所嘗試的做法 - 但如果您使用百分比而不是像素來表示所有四個div的寬度，那該怎麼辦？

#top 
{ 
    width:100%; 
    background-color:#FF0000; 
    height:30px; 
    overflow: auto; 
    width: 100% 
} 


#right 
{ 
    float:right; 
    width:25%; 
    background-color:#CCC; 
    height:100%; 
} 

#middleCont 
{ 
    margin-left:36%; 
    margin-right:26%; 
} 

#middle 
{ 
    margin:auto; 
    text-align:left;  
} 


#left 
{ 
    float:left; 
    width:35%; 
    height:100%; 
    background-color:#CCC; 
}

來源

2010-12-07 18:33:14 TheLibzter

我這樣做。即使對於Internet Explorer 6工作。

<table border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;"> 
    <tr> 
     <td width="50%" valign="top" style="width:50.0%;"> 

     </td> 
     <td valign="top" style="width:900px;"> 
      <div style="width:900px; border:1px solid white;"></div> 
     </td> 
     <td width="50%" valign="top" style="width:50.0%;"> 

     </td> 
    </tr> 
</table>

來源

2011-11-09 11:03:56 xazosxazos

3列布局中的CSS中心元素

回答

相關問題