我目前正在尝试做这样的事情:
问题是这些是绝对定位的图像，因此它们可以重叠。我想将这些重叠的图像集中在 Bootstrap 列中，如下所示:
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 text-center">
<div id="imgdiv">
<img id="ximage" src="css/images/x-ray-lat-left.png" width="578" height="715" border="0"/>
<img id="emptygif" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" width="578" height="715" usemap="#location-map" border="0"/>
<img id="overlayr1"> </img>
<img id="overlayr2"> </img>
<img id="overlayr3"> </img>
<map name="location-map" id="location-map" border="0">
<area id="r1" shape="rect" coords="250,250,340,370" href="#" alt="Hilum"/>
<area id="r2" shape="rect" coords="90,150,340,500" href="#" alt="Heart"/>
<area id="r3" shape="rect" coords="130,120,460,530" href="#" alt="Righ Lung"/>
</map>
</div>
</div>
</div>
但绝对定位确实会在响应方面造成困惑。如果我取消绝对定位，那么我的图像就会乱七八糟。
知道我能做什么吗？
最佳答案
我找到了一个简单的解决方法:
在列中的所有元素中(在我的例子中是图像)，我在它们的 CSS 中包含:
#innerelements{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
在这里找到答案:
How to center absolute element in div?
感谢您的帮助!
关于html - 在 Bootstrap 列中居中重叠图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28509417/