Question

我希望能够将一些图标集中在横幅上，该横幅位于已经存在的div的中间。我不能使用绝对定位，因为它会使它居中但不会设置它。我怎么能做到这一点？

Answer 1

可能margin: auto;有效吗？或者你也需要垂直居中？

编辑：也许有些东西：

<div>
  <div style="width:208px; height: 58px; margin: auto;">
    <img src="some_image_somewhere.png" width="208" height="58" style="position:absolute;">
    <img src="some_image_somewhere.png" width="208" height="58">
  </div>
</div>

这显示两个图像在顶部div中居中，但它不漂亮（代码方式，imo）。

Answer 2

您需要将两者都设置为绝对位置
outter div需要是相对的
out out div也应设置宽度（这样当你为图像容器指定一个完整的宽度时，它会将它对齐到中间（因为你设置了一个text-align：center到你的div）需要居中））。
每个图像都需要在其自己的div中具有绝对位置（z顺序与代码中的顺序相同，后面的顺序将位于顶部）。

代码：

<div style="width:300px; height: 100px; position: relative;">
<div style="position: absolute;"><img src="http://i.stack.imgur.com/1aBfM.png" width="300" height="100"></div>
<div style="position: absolute; width: 100%; text-align: center;"><img src="http://i.stack.imgur.com/DH3Qw.png" width="100" height="100"></div></div>

示例：http://jsfiddle.net/Y9PhP/

Answer 3

jackJoe是对的。

您也可以使用style="position: absolute; top:10000px"来调整重叠图像的高度。

如何在偏移div的中心叠加图像？

3 个答案: