[Solved] Vertically Align One Image over Other (Responsive)

[tahirk]

Hi,

I’m working on creating a quiz (where users can select/deselect images by clicking over it).

Currently, I’m having issues with aligning the Checked image over the already available image. I want the checked image to appear at exact center (vertically/horizontally) and must also be responsive. I’ve tried quite a few things but it won’t get at exact center.

Any help in this regard is highly appreciated.

Here is the pen.

[tahirk]

Currently, I haven’t implemented that. At first, I want to make sure that the checked icon is exactly aligned.

We could also do test check by changing the opacity: 0 to opacity:1 of .quizimgblock a .check.

From:
.quizimgblock a .check {
  opacity: 0;

To:
.quizimgblock a .check {
  opacity: 1;

[Paulie_D]

There’s a lot of stuff going on in the Codepen so it’s hard to be overly specific but, in general this will work.

Item to be centered

  position: absolute;
  top: 50%; /* half way down */
  left:50%;  /* halfway over */
  -webkit-transform:translate(-50%, -50%); /* move it back 50% of it's own width & height */

http://codepen.io/Paulie-D/pen/xbltq

[tahirk]

Thanks for the help. Yes, it did helped a lot. The problem I have is that I’ll be using a fixed size CHECKED image for selecting the images and the the images to be selected are completely responsive, so I do think that we can’t have an absolute fix for this and the current one does seems to work fine until we hit less than 360px screen.

Here is the pen.

[tahirk]

Thanks Soronbe. Yes, I’m controlling it with media quires but still we can’t be perfect with it as we are using one image with fixed width/height, although it would be changing through media queries but that’ll be a jump and not completely according to the responsive image.

Never the less, I’ve got the result which is more than acceptable, and the difference isn’t bad on smaller screen, checked image appears a bit on down side.

[Author]

Posts