[Solved] Aligning a row of images to the center…

[cscodismith]

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%);
    }   

My result
Codepen

[Paulie_D]

Position absolute is a pretty poor layout method and very inflexible

Try inline block and text align center on the parent.

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

[cscodismith]

Hmm… 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,
Codi

[Paulie_D]

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

[Paulie_D]

Or…are you trying to do this

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

[cscodismith]

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

[Author]

Posts