Question

我目前正在尝试这样做：

问题是这些是绝对定位的图像，因此它们可以重叠。我想将这些重叠的图像置于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">&nbsp;</img>  
            <img id="overlayr2">&nbsp;</img>
            <img id="overlayr3">&nbsp;</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>

但是绝对定位确实会在响应方面使事情变得混乱。如果我拿出绝对定位，那么我的图像会搞砸。

知道我能做什么吗？

Answer 1

我找到了一个简单的方法：

在列中的所有元素中（所以在我的例子中，图像），我都包含在他们的CSS中：

#innerelements{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto; 
}

在这里找到答案：

How to center absolute element in div?

感谢您的帮助！

Answer 2

每当你试图做这样的事情时，诀窍是将绝对定位元素放在相对定位元素内。因此，首先将图像包装在相对定位的div中。让div按你想要的那样运行，然后将图像放在那些内部。

绝对定位的子元素是相对于其父元素的，如果这是有意义的。

Answer 3

控制绝对定位元素的一种方法是将它们包装在容器中并设置容器position:relative;。然后你只需要将这个容器居中以获得你想要的东西。而且我相信更容易为您处理相对位置元素。

在引导列中居中重叠图像

3 个答案: