我有問題橫向居中我的幻燈片圖像,使他們在所有屏幕尺寸/分辨率的中心。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;
}
我真的努力在這裏得到圖像居中的,因爲所有的屏幕尺寸填充和利潤不工作我需要一種不同的方法!
任何回覆非常感謝。
噢,我忘了提及,如果'img'沒有填充它所包含的'div',你還需要確保'div'設置爲'text-align:center;'或者使'img'寬度與容器相同 – Ozzy
嗨不幸的是上述評論沒有解決這個問題:( 我得出結論,由於jQuery插件應用CSS規則的困惑,它幾乎是不可能的。 一旦jQuery插件div類被移除,內容包裝設置爲'text-align:center',圖像中心就完美了。我猜我必須嘗試一個不同的幻燈片插件,除非你認爲你可以進一步 只是爲了說明我已經嘗試使用!重要的。 –
@ LiquidFusi0n如果你有IE9或FireFox冷杉eBug,按F12查看開發人員工具,點擊「箭頭」圖標,選擇相關容器,然後查看實際應用到的CSS,稍作調查即可查找。 – Ozzy