- This topic is empty.
-
AuthorPosts
-
November 18, 2014 at 2:42 pm #188648cscodismithParticipant
I am having problems aligning my ‘icons’ in this take to align all in the very center of the image as well as set some room between them. I have tried to set a margin-right as well as padding on them but that has not done anything to make any room between all of them.
HTML:
<div class="icons"> <img class="icon1" src="includes/img/icons/email.png" width="5%" alt="icon" /> <img class="icon2" src="includes/img/icons/twitter.png" width="5%" alt="icon" /> <img class="icon3" src="includes/img/icons/facebook.png" width="5%" alt="icon" /> <img class="icon4" src="includes/img/icons/tumblr.png" width="5%" alt="icon" /> </div>
CSS:
.icon1 { position: absolute; z-index: 100; text-align: center; left: 50%; top: 60%; transform: translate(-50%, -50%); } .icon2 { position: absolute; z-index: 100; text-align: center; left: 55%; top: 60%; transform: translate(-50%, -50%); } .icon3 { position: absolute; z-index: 100; text-align: center; left: 60%; top: 60%; transform: translate(-50%, -50%); } .icon4 { position: absolute; z-index: 100; text-align: center; left: 65%; top: 60%; transform: translate(-50%, -50%); }
November 18, 2014 at 2:53 pm #188649Paulie_DMemberPosition absolute is a pretty poor layout method and very inflexible
Try inline block and text align center on the parent.
November 18, 2014 at 3:07 pm #188650cscodismithParticipantHmm… Not sure what happened. When using the style-sheet that you provided on the codepen here it does not display the images at all. I beleive that I was using the absolute positioning so that all of the images would display above the background image I had.
Best regards,
CodiNovember 18, 2014 at 3:18 pm #188653Paulie_DMemberI did narrow down your CSS on the icon images to a single class/attribute to avoid repetition.
Unless you have something else going on it should work…since it clearly does in Codepen.
Is there something you’re not mentioning?
November 18, 2014 at 3:23 pm #188654Paulie_DMemberOr…are you trying to do this
November 18, 2014 at 3:25 pm #188655cscodismithParticipantNothing else would effect it that I did not mention but I figured out an alternative way to fix it while using position absolute still. If you’re interested to see what I did you can view it here. I really do appreciate your help though and am grateful for that. Have a nice day.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.