我有問題橫向居中我的幻燈片圖像，使他們在所有屏幕尺寸/分辨率的中心。CSS Centering幻燈片圖像

的HTML看起來這樣

<div id='banner'> 
    <div class='slides_container'> 
     <div> 
      <a href='#'><img src='images/banner.png'></a> 
     </div> 
     <div> 
      <a href='#'><img src='images/banner2.png'></a> 
     </div> 
    </div> 
</div>

而CSS來匹配是這樣的：

#banner { 
    width:100%; 
    margin-bottom:50px; 
} 

.slides_container { 
    width:100%; 
    height:500px; 
} 

.slides_container div { 
    width:1100px; 
    height:500px; 
    text-align:center; 
}

我真的努力在這裏得到圖像居中的，因爲所有的屏幕尺寸填充和利潤不工作我需要一種不同的方法！

任何回覆非常感謝。

來源

2012-05-08 James Parker

你應該確保.slides_container div是其母公司中居中，即

.slides_container div { 
    margin: 0px auto; // center 
    width:1100px; 
    height:500px; 
    text-align:center; 
}

如果不工作，你需要確保父容器是頁面寬度的100％。

如果家長不寬的頁面的100％，家長需要有這個屬性也：

.slides_container { 
    margin: 0px auto; 
}

如果不工作，那麼你需要確保其母公司爲100％頁面的寬度。

希望這會有所幫助。

編輯

我看了看它在Firebug，這是顯而易見的是，滑容器設置爲3800px寬，DIV中沒有設置寬度。如果將幻燈片容器中的div設置爲100％寬度，則會導致它變爲3800像素寬度，因此無法使用。

根據您使用的腳本的性質，它使用了一個abolute-located div來工作。所以margin: 0px auto不會在這裏工作。

該解決方案是一個JavaScript運行onload，並在窗口調整大小，以設置該圖像保存爲您的瀏覽器窗口的寬度，和文本對齊：中心。因此，例如，因爲我有1280px寬屏顯示器，該中心的形象對我來說：

.slides_control div { 
    width: 1280px; 
    text-align: center; 
}

來源

2012-05-08 21:20:34 Ozzy

噢，我忘了提及，如果'img'沒有填充它所包含的'div'，你還需要確保'div'設置爲'text-align：center;'或者使'img'寬度與容器相同 – Ozzy

嗨不幸的是上述評論沒有解決這個問題:( 我得出結論，由於jQuery插件應用CSS規則的困惑，它幾乎是不可能的。一旦jQuery插件div類被移除，內容包裝設置爲'text-align：center'，圖像中心就完美了。我猜我必須嘗試一個不同的幻燈片插件，除非你認爲你可以進一步只是爲了說明我已經嘗試使用！重要的。 –

@ LiquidFusi0n如果你有IE9或FireFox冷杉eBug，按F12查看開發人員工具，點擊「箭頭」圖標，選擇相關容器，然後查看實際應用到的CSS，稍作調查即可查找。 – Ozzy

通常他們用margin:0 auto;來解決這個問題。 text-align不會對你有好處div。

來源

2012-05-08 17:48:11 5566

添加.slides_container img和margin:0 auto

#banner { width:100%; margin-bottom:50px; } 

.slides_container { 
    width:100%; 
    height:500px; 
} 

.slides_container div, .slides_container img { 
    width:1100px; 
    height:500px; 
    text-align:center; 
    margin:0 auto; }

來源

2012-05-08 17:55:56 breezy

感謝不幸的是這並沒有達到定心的反應，其實在屏幕上的結果也沒有改變。 –

你能提供一個鏈接，看看你的看到？ – breezy

當然可以。 http://tinypic.com/r/246jiav/6 正如你所看到的幻燈片的圖像保持在左邊。 –

CSS Centering幻燈片圖像

回答

編輯

相關問題