Question

我有一个名为“#connect”的div。在它的里面，有一个标题，下面还有另一个div，里面有一个CSS Sprite。

我无法让CSS精灵在标题下方对齐，即使我将#connect div设置为text-align：center;

这是我的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>

这是我的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;
}

这是我的小提琴：http://jsfiddle.net/gUUYc/2/

Answer 1

您的图标需要display:inline-block;才能进行文字对齐。还需要换行。请参阅下面的小提琴：

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

Answer 2

一个简单的解决方案是修改你的css的这一部分：

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

将左右边距设置为自动，并为它们设置一个宽度，强制它们居中于父元素。

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

CSS水平对齐问题

2 个答案: