CODEWITHSUNDEEP
htmlcssalignmentsprite
Eric Wood
Eric Wood

Reputation: 589

CSS Horizontal Alignment Issue

I have a div called "#connect". Inside of it, there's a heading, and underneath that there's another div, with a CSS Sprite in it.

I'm having trouble getting the CSS sprite to align underneath the heading, even though I have the #connect div set to text-align:center;

Here's my HTML:

<div id="connect">
    Connect with us
        <div id="social-icons">
            <a class="facebook" target="_blank" href="#"></a>
            <a class="youtube" target="_blank" href="#"></a>
            <a class="twitter" target="_blank" href="#"></a>
            <a class="instagram" target="_blank" href="#"></a>
        </div>
</div>

Here's my CSS:

div#connect{
    background-color:#EEEEEE;
    text-align:center;
    padding:40px 0;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.0625em;
    display:block;
}

div#social-icons{
    margin-bottom:50px;
    display:block;
}

div#social-icons a {
    background-image: url('http://s27.postimg.org/unv91ngq7/social_sprite.png');
    background-repeat: none;
    width: 40px;
    height: 40px;
    float:left;
    margin:5px;
    transition: background-position .25s ease;
    -webkit-transition: background-position .25s ease;
    -moz-transition: background-position .25s ease;
    -o-transition: background-position .25s ease;
}

div#social-icons a.facebook {
    background-position: 0 0;
}

div#social-icons a:hover.facebook {
    background-position: 0 40px;
}

div#social-icons a.youtube {
    background-position: 120px 0;
}

div#social-icons a:hover.youtube {
    background-position: 120px 40px;
}

div#social-icons a.twitter {
    background-position: 80px 0;
}

div#social-icons a:hover.twitter {
    background-position: 80px 40px;
}

div#social-icons a.instagram {
    background-position: 40px 0;
}

div#social-icons a:hover.instagram {
    background-position: 40px 40px;
}

Here's my fiddle: http://jsfiddle.net/gUUYc/2/

Upvotes: 0

Views: 148

Answers (2)

Andrew
Andrew

Reputation: 20091

A simple solution would be to modify this part of your css like so:

div#social-icons{
    margin:0 auto 50px auto;
    display:block;
    width:200px;
}

Set your left and right margins to auto, and give them a set width, forces them to center in parent element.

http://jsfiddle.net/gUUYc/5/

Upvotes: 0

Michael Tempest
Michael Tempest

Reputation: 834

You need display:inline-block; for your icons to take on the text-alignment. Also a line break is needed. See the fiddle below:

http://jsfiddle.net/gUUYc/3/

Upvotes: 1

Related Questions