如何用一些固定的邊距將元素居中？

我試圖設置元素的邊距爲自動值（我想保持居中）加上特定數量的像素，但calc(auto + 20px)似乎沒有工作。這裏是我的代碼：如何用一些固定的邊距將元素居中？

#game { 
    border: 5px groove orange; 
    padding-left: 0px; 
    padding-right: 0px; 
    width: 400px; 
    height: 400px; 
    margin-left: calc(auto + 20px); 
    margin-right: calc(auto + 20px); 
    display: block; 
}

這種方法是否有其他替代方法？

來源

2017-03-08 Larpee

這是什麼目的？每邊的「+ 20px」將保持該元素與'auto'相同的位置。 – DaniP

爲什麼不使用padding-left和padding-right，每個邊距都爲20px，並且保留邊距auto？這有什麼問題嗎？也許一個小的HTML隨着這將有所幫助。 – Hassan

@Hassan如果我使用填充頁面將顯示元素的內容和其邊框之間的空白空間，我不希望發生這種情況 – Larpee

您可以通過添加額外的容器來實現。

.container { 
 
    text-align: center; 
 
    background: pink; 
 
} 
 

 
.inner { 
 
    display: inline-block; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    background: aqua; 
 
}

<div class="container"> 
 
    |<div class="inner">Hello world</div>| 
 
</div>

來源

2017-03-08 15:33:23 Stickers

非常感謝您的幫助，我嘗試了您的解決方案，併發揮了作用 – Larpee

因此，在我們理解你有一個外層div（允許ID是遊戲容器）和內部的div（id爲遊戲）。內部div是居中的，你希望外部div比內部的div大一點，這意味着現在它堅持到邊界。正如Abhitalks建議的那樣，您可以輕鬆地將填充添加到外部元素並實現此目的。

#game { 
 
    border: 5px groove orange; 
 
    width: 400px; 
 
    height: 400px; 
 
    display: inline-block; 
 
    background-color: blue; /*for demo*/ 
 
} 
 

 
#game-container{ 
 
    padding-left:20px; 
 
    padding-right:20px; 
 
    text-align: center; 
 
    background-color: green; /*for demo*/ 
 
}

<div id='game-container'> 
 
    <div id='game'> 
 
     <h1>Sprite</h1> 
 
    </div> 
 
    </div>

如果在你的外層div等元素，可以添加圍繞遊戲的又一新的div和應用其CSS作爲遊戲容器。

希望這會有所幫助！

來源

2017-03-08 15:58:33 Hassan

非常感謝您的幫助！ :) – Larpee

如何用一些固定的邊距將元素居中？

回答

相關問題