如何用一些固定的边距将元素居中？

我试图设置元素的边距为自动值（我想保持居中）加上特定数量的像素，但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

如何用一些固定的边距将元素居中？

回答

相关问题