CODEWITHSUNDEEP
htmlcsscss-positionabsoluteresponsive
JordanBarber
JordanBarber

Reputation: 2101

Horizontally center absolute images

I have a relatively position wrapper around three absolutely positioned images. How can I center these images inside the wrapper without changing the 'left' value so that I can make this module fluid responsive?

My html:

    <div class="illustrations">
       <img src="http://fillmurray.com/175/112" alt="" class="platform desktop"> 
       <img src="http://fillmurray.com/143/110" alt="" class="platform tablet" style="left: 110px;"> 
       <img src="http://fillmurray.com/40/87" alt="" class="platform mobile" style="left: 230px;"> 
    </div>

See my fiddle here https://jsfiddle.net/gjexgw86/

Just want to always have the images centered without changing the absolute 'left' values.

Upvotes: 0

Views: 65

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105853

You may give a try to both right and left coordonates and use margin:auto;

.illustrations {
  position: relative;
  text-align: left;
  text-align: center;
  height:140px;
  /* see me and my center */
  border: solid;
  background:linear-gradient(to left, transparent 50%, rgba(0,0,0,0.2) 50% ),linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50% )
}

.platform {
  transform: translatey(-50%);/*transform would be for vertical centering , optionnal */
  vertical-align: middle;
  position: absolute;
  left: 0;
  right:0;/* add this to center */
  margin:70px auto;/* 70px from + transform would be for vertical centering , optionnal */
  transition: all .7s ease-in-out;
  }
.illustrations:hover .platform {
  /* see behind */
  opacity:0.5
}
<div class="illustrations">
  <img src="http://fillmurray.com/175/112" alt="" class="platform desktop">
  <img src="http://fillmurray.com/143/110" alt="" class="platform tablet" style="left: 110px;">
  <img src="http://fillmurray.com/40/87" alt="" class="platform mobile" style="left: 230px;">
</div>

Notice that :

  • left:0;+ right:0; = in the midddle
  • left:110px;+ right:0; = 110px away from middle
  • left:230px;+ right:0; = 230px away from middle

https://jsfiddle.net/gjexgw86/4/

Upvotes: 0

ntgCleaner
ntgCleaner

Reputation: 5985

If you can't change the left value, you'll have to change their translate value.

Not sure how you're scripting the whole thing, but you'd use 

transform:translateX(-125px);

or however much you need to move them.

Upvotes: 1

F.Igor
F.Igor

Reputation: 4350

For a responsive result, you need to set relative positions between images instead absolute values (absolute left position) :

See in https://jsfiddle.net/gjexgw86/2/ using negative margin-left between images and let the outer container center the content.

.illustrations {
    width:100%;
    text-align:center;
    height:140px;
}

.platform {
    transition: all .7s ease-in-out;
}


<div class="illustrations">
                        <img src="http://fillmurray.com/175/112" alt="" class="platform desktop">
                        <img src="http://fillmurray.com/143/110" alt="" class="platform tablet" style="margin-left: -65px;">
                        <img src="http://fillmurray.com/40/87" alt="" class="platform mobile" style="margin-left: -30px;">
                    </div>

Upvotes: 0

ARJUN
ARJUN

Reputation: 409

Are you looking for responsive way of arranging the images, here I did with Bootstrap.

Check here : https://jsfiddle.net/my23wuxz/

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4" style="text-align:center;"><img src="http://fillmurray.com/175/112" alt=""> </div>
    <div class="col-sm-4" style="text-align:center;"><img src="http://fillmurray.com/143/110" alt="" > </div>
    <div class="col-sm-4" style="text-align:center;"><img src="http://fillmurray.com/40/87" alt="" ></div>
  </div>
</div>

Upvotes: 0

Related Questions