- This topic is empty.
-
AuthorPosts
-
August 12, 2014 at 4:50 am #178693
tahirk
ParticipantHi,
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.
August 12, 2014 at 5:06 am #178698tahirk
ParticipantCurrently, 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;
August 12, 2014 at 5:23 am #178699Paulie_D
MemberThere’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 */
August 12, 2014 at 9:13 am #178738tahirk
ParticipantThanks 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.
August 12, 2014 at 9:56 am #178743tahirk
ParticipantThanks 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.