html - 如何在div的两侧都具有相同的填充。的CSS

我有这个元素：

<div class="menubar">
    <a href="http://home.com"><img src="../img/home_button.png"/></a>
    <a href="http://home.com/a"><img src="../img/a_button.png"/></a>
    <a href="http://home.com/b"><img src="../img/b_button.png"/></a>
    <a href="http://home.com/c"><img src="../img/c_button.png"/></a>
</div>

我的目标是让menubar div的内容居中。
使用display: table;和margin:auto;可以实现这一点，但我使用的背景图像将被裁剪为仅适合div的内容：

.menubar {
    display: table;
    margin: auto;
    background-image:url(/img/menubar_background.png);
}

所以，我有另一个版本，在两边加50%的填充，但问题是结果的总宽度是100%+按钮的宽度。

.menubar {
    padding-right:50%;
    padding-left:50%;
    background-image:url(/img/menubar_background.png);
}

我通过使用max-width:960px（100%）实现了更接近的目标，但仍然存在一个问题：它实际上并没有在两侧应用相同的填充量。它最后在左边填充50%，在右边填充960px。
欢迎任何帮助！

最佳答案

使用文本-align instead。

.menubar {
  text-align:center;
  background-image:url(/img/menubar_background.png);
}

关于html - 如何在div的两侧都具有相同的填充。的CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16696987/