居中divs不工作，因爲它應該

我一直在尋找解決方案，並試圖實現什麼是經常建議，但我沒有管理水平居中在另一個div div。居中divs不工作，因爲它應該

隨着我的CMS我想顯示最多四個信息塊朝着頁面的底部。所以，我試圖在兩個容器div內放置零個和四個div。四個div的可用寬度分別爲19％，33％或49％，具體取決於頁面上顯示的div數量。內容器應該在外容器內水平居中。因此，最多四個div的組當然應該結束於水平中心。由於內容器的寬度與主內容的寬度相同，所以它的中心位置應該垂直排列。外部容器佔用整頁寬度並具有背景圖像。

我的代碼如下內容：

<!-- BEGIN USER MODULES --> 
<tr> 
    <td align="left" valign="top"> 

    <?php if ($this->countModules('user1 and user2') || $this->countModules('user1 and user3') || $this->countModules('user1 and user4') || $this->countModules('user2 and user3') || $this->countModules('user2 and user4') || $this->countModules('user3 and user4')) : ?> 
     <style type="text/css">#user1, #user2, #user3, #user4 { width:49%; }</style> 
    <?php endif; ?> 
    <?php if ($this->countModules('user1 and user2 and user3') || $this->countModules('user1 and user2 and user4') || $this->countModules('user1 and user3 and user4') || $this->countModules('user2 and user3 and user4')) : ?> 
     <style type="text/css">#user1, #user2, #user3, #user4 { width:33%; }</style> 
    <?php endif; ?> 
    <?php if ($this->countModules('user1 and user2 and user3 and user4')) : ?> 
     <style type="text/css">#user1, #user2, #user3, #user4 { width:19%; }</style> 
    <?php endif; ?> 

    <?php if ($this->countModules('user1 or user2 or user3 or user4')) : ?><div id="wrap1234"><div id="user1234"> 
     <?php if($this->countModules('user1')) : ?><div id="user1" class="module_bc"><jdoc:include type="modules" name="user1" style="xhtml" /></div><?php endif; ?> 
     <?php if($this->countModules('user2')) : ?><div id="user2" class="module_bc"><jdoc:include type="modules" name="user2" style="xhtml" /></div><?php endif; ?> 
     <?php if($this->countModules('user3')) : ?><div id="user3" class="module_bc"><jdoc:include type="modules" name="user3" style="xhtml" /></div><?php endif; ?> 
     <?php if($this->countModules('user4')) : ?><div id="user4" class="module_bc"><jdoc:include type="modules" name="user4" style="xhtml" /></div><?php endif; ?> 
    </div><div class="clear"></div></div><?php endif; ?> 

    </td> 
</tr>

在我的樣式表，我有這樣的：

#wrap1234 { background:transparent url(images/header_bg.png) no-repeat scroll 0 0; border-bottom:1px solid #444444; border-top:1px solid #444444; margin:25px 0 10px; padding:5px 0; text-align:center; align:center;} 

#user1234 { width:1420px; margin-left:auto; margin-right:auto; } 

#user1, #user2, #user3, #user4 { float:left; margin:5px 0; padding:5px 0; text-align:left; }

在這一切都被放置在桌子和身體情況如下，跳過一切超出直接分級線：

<body><div id="wrapper_main"><center><table border="0" cellpadding="0" cellspacing="0" width="<?php echo $this->params->get('width'); ?>" id="main_table"><tbody>

正文和表格的css在下面。使用Firebug我無法找到任何關閉時會產生影響的內容。

html, body, form, fieldset{margin:0; padding:0;} 
body {background:#222222 none repeat scroll 0 0; color:#777777; font-family:Helvetica,Tahoma,sans-serif; font-size:0.72em; height:100%; text-align:center;} 
#wrapper_main {background:#FFFFFF url(images/wrapper_main_bg.gif) repeat-x scroll left top; border-bottom:2px solid #CCCCCC; padding-bottom:20px; position:relative; width:100%; z-index:1;} 
td, div {font-size:100%;}

實際頁面在我的開發網站jldev d o t joomlaloft.com上可用。

正如你所看到的，我已經給出了內部容器的固定寬度以及左右邊距自動，正如經常被認爲是水平居中居中的方式。但是，帶有div的內部容器最終左對齊。

可以這樣做嗎？或者，我是否應該嘗試一種替代方法，例如在最左側和最右側的信息塊div上放置可變的保證金左右？

我已經看到，在stackoverflow上有很多很好的答案，所以我希望有人能夠告訴我我出錯的地方。因爲這是我的靈感...非常感謝您提供任何幫助！

PS順便說一句，這必須是我見過的最直觀和實用的論壇之一！

來源

2009-05-21 E Wierda

，比它的內含div內居中的div不能更寬。在我的瀏覽器中，您的網站寬度爲1200像素，＃user1234爲1420像素;

將＃user1234設置爲寬度：90％;和每個用戶div的寬度：25％;當有4個div。把溢出：隱藏;在＃user1234清除浮游物。

它看起來不像＃user1234 div居中，因爲＃user4 div文本沒有填充可用空間。放置背景顏色：＃c00;在＃user1234上查看它的邊界在哪裏。（注意：你必須有溢出：否則隱藏＃user1234沒有高度，你將看不到背景顏色）。

回覆：以前的評論 - 在同一個標簽上使用寬度和邊距沒有問題。

來源

2009-05-21 11:55:11 Emily

當我想將DIV居中時，我所做的事情就是相對放置它。將左側設置爲50％，並將剩餘邊距設置爲div寬度的1/2即可將div完美居中放置在容器中。我過去曾經使用過這種方式，據我所知，它在大多數瀏覽器（IE6 +和非IE瀏覽器）中都可以使用。雖然可能有更好的方法來做到這一點。

#user1234 { position: relative; 
      left: 50%; 
      margin-left: -710px; 
      width:1420px;}

來源

2009-05-21 08:45:37

這幾乎適用於我，但我必須將左邊距設置得更低。直到艾米麗的回答，最後才清楚，寬度設置是完全失算的。有了這個工作的正確寬度，這是一個很好的選擇。 – 2009-05-21 15:31:09

是的。艾米麗的回答真的成爲你爲什麼沒有工作的核心。很高興你有一些工作！ – 2009-05-22 10:17:02

我不確定你爲什麼使用width：1420px。請按照this或網站的正確佈局教程在CSS。另一種選擇是使用css grid。

我個人建議，把表格和切換到流體網格，這將最適合您的網站。它有一點學習曲線，但相信我，你會從此過上快樂。您的網站上有很多工作要做，儘管CSS可以變得更好。如果你需要立即的幫助，CSS freenode通常給出很好的建議和批評。

另一件事，它不推薦使用寬度和餘量在相同的代碼

來源

2009-05-21 09:53:21 dassouki

感謝那些偉大的鏈接！雖然其他答案作爲短期解決方案更爲實用，但這些信息對我來說是令人大開眼界，並且很適合我在下一階段製作無表網站的計劃。 – 2009-05-21 15:28:27

居中divs不工作，因爲它應該

回答

相關問題