2

我有这个元素：

<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>

我的目标是让菜单栏 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%，剩下的任何东西都向右填充 960 像素。

欢迎任何帮助！

4

2 回答 2

5

Use text-align instead.

.menubar {
  text-align:center;
  background-image:url(/img/menubar_background.png);
}
于 2013-05-22T16:29:52.830 回答
0

如果你知道元素的宽度，你可以使用calc：

.menubar {
  --menu-width: 112px;
  width: var(--menu-width);
  padding-left: calc((100% - var(--menu-width)) / 2);
  padding-right: calc((100% - var(--menu-width)) / 2);
  color: #4fff09;
  background: gray;
}
<div class="menubar">
    menu bar content
</div>

于 2021-01-11T17:13:05.850 回答