如何使這個代碼中心即使兩個邊距設置爲自動？

-1

所以我有這個代碼，並由於某種原因，它拒絕居中在頁面的底部，即使當我將兩個邊距設置爲「自動」。我真的不知道還有什麼可以嘗試的。如何使這個代碼中心即使兩個邊距設置爲自動？

.bottomcenter { 
    Position: absolute; 
} 

.bottomcenter { 
    position: fixed; 
    bottom: 0; 
    margin-right: auto; 
    margin-left: auto; 
}

來源

2014-08-28 Little Gamie

顯示您的標記了。在[fiddle]（http://jsfiddle.net/）中顯示你的代碼。 – Benjamin 2014-08-28 15:05:35

當您設置一個元素position: fixed;它跳出頁面流的，所以你不能用margin: auto;居中，你將不得不使用：

.bottomcenter { 
    position: fixed; 
    bottom: 0; 
    left: 50%; 
    -webkit-transform: translateX(-50%); /*use this if the width of the element is unknown*/ 
    -moz-transform: translateX(-50%); /*use this if the width of the element is unknown*/ 
    -o-transform: translateX(-50%); /*use this if the width of the element is unknown*/ 
    transform: translateX(-50%); /*use this if the width of the element is unknown*/ 
    width: 200px; /*admitting you know the width of the element*/ 
    margin-left: -100px; /*this is half the with of the element, admitting it is fixed*/ 
}

來源

2014-08-28 15:07:54

是的，它做到了！謝謝你，我剛剛開始學習這些東西，所以一點點通知，但我相信在適當的時候我會得到它的掛鉤。謝謝你：D – 2014-08-28 15:27:43

別擔心。知道什麼CSS屬性從流中取元素。還有更多，學習它們會幫助你很多 – 2014-08-28 15:29:48

裹.bottomcenter在容器格即全寬，然後添加text-align: center到包裝DIV：

<div class="bottomcenterwrap"> 
    <div class="bottomcenter"> 
    ... 
    </div> 
</div>

和

.bottomcenterwrap 
{ 
    text-align: center; 
    width: 100%; 
} 

.bottomcenter 
{ 
    ... 
    margin: 0 auto; 
}

然後加入position: fixed到包裝

來源

2014-08-28 15:09:02 Luke

如何使這個代碼中心即使兩個邊距設置爲自動？

回答

相關問題