我該如何居中對齊大於整個頁面100％的元素？

我有一個div寬度爲100％，隱藏溢出持有寬度爲3000px的div。我希望3000px div在左側和右側均勻切斷。我會使用background-position：center;但是，它比這更復雜。 3000px div保存30個100像素的div。我已經嘗試在3000px div的左側和右側使用自動邊距，但沒有奏效。這裏是css：我該如何居中對齊大於整個頁面100％的元素？

.bgAnimHolder{ 
    width:100%; 
    height:500px; 
    overflow:hidden; 
    position:absolute; 
    z-index:1; 
    top:0px; 
} 

.row{ 
    margin: 0 auto 0 auto; 
    height:500px; 
    width:3000px; 
} 

.row div{ 
    width:100px; 
    float:left; 
    margin-top:0px; 
}

我怎樣才能安排3000px股利定位在屏幕中間，無論屏幕分辨率？我願意使用CSS或JavaScript，以解決問題爲準。謝謝！

來源

2011-06-28 ecollis6

你可能會需要JS來確定屏幕尺寸和使用負邊距。 –

您應該標記/檢查@locrizak答案旁邊的勾號以接受它作爲答案。 – tw16

你可以用CSS做：

.row{ 
    position:absolute; 
    top:0px; 
    left:50%; 
    margin-left:-1500px /* half of the width */ 
    height:500px 
}

只要確保母上有一個position:absolute/relative

來源

2011-06-28 18:41:05 locrizak

偉大的解決方案。非常感謝你。 – ecollis6

我可能不理解你的問題的根源，但你可以設置左，容器的右邊距（相同）負值。爲了簡潔明瞭，我的代碼被簡化了。

div.center 
{ 
    margin:1em -10em; 
    background:#CCC; 
    text-align:center; 
    padding:1em; 
}

<div class="center"> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div>

來源

2011-06-28 18:44:48

我該如何居中對齊大於整個頁面100％的元素？

回答

相關問題