0

I am currently trying to do something like this:

Overlaying Image Example

The issue is that these are absolute positioned images so that they can overlap. I want to center these overlapping images in a Bootstrap column, like this:

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

but absolute positioning really messes things up in terms responsiveness. If I take out absolute positioning then my image gets messed up.

Any idea what I could do?

gtdevel
  • 1,513
  • 6
  • 21
  • 38

3 Answers3

1

I found a simple way around this:

In all of the elements that are in the column (so in my case, the images), I included in their CSS:

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

Found the answer here:

How to center absolute element in div?

Thanks for your help!

Community
  • 1
  • 1
gtdevel
  • 1,513
  • 6
  • 21
  • 38
0

Whenever you are trying to do something like this, the trick is to put the absolute positioned element inside of a relative positioned element. So wrap your images in a relatively positioned div first. Get that div acting as you want it, and then position the images inside of those.

The absolute positioned child element is relative to its parent, if that makes sense.

skribe
  • 3,595
  • 4
  • 25
  • 36
0

One way to control absolute positioning elements is to wrap them in a container and set the container's position:relative;. Then you just need to center this container to get what you want. And i believe is way easier to handle a relative position element for you.

Linghanmin Liu
  • 76
  • 3
  • I added this in css to my imgdiv element: #imgdiv{ position:relative; text-align: center; } But its centering in the middle of the browser, instead of the column. – gtdevel Feb 13 '15 at 22:11
  • Oh, i see what you mean. Try to add `margin: auto 0;` or maybe `auto` – Linghanmin Liu Feb 13 '15 at 22:14
  • Doesn't change... Still centering in the middle of the browser. Maybe something with the width parameter of #imgdiv? – gtdevel Feb 13 '15 at 22:20
  • Sorry buddy, I just came up with another option. Add `#imgdiv{ top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }` Check this link: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ – Linghanmin Liu Feb 13 '15 at 22:21
  • Thats for a vertical align. I am looking for a horizontal align. – gtdevel Feb 13 '15 at 22:31