Question

我想要做的就是将社交媒体链接和页面中心的版权保持一致。我尝试使用带有0px auto的余量的中心对齐技巧。这似乎不起作用。如果你不介意解释它是什么我会做错的那将是伟大的。谢谢！的 CSS：

.social-slide {
    height: 30px;
    width: 30px;
    margin: 0px 20px 0px 30px;
    float: right;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}
.social-slide:hover {
    background-position: 0px -30px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); 
} 


.twitter-hover {
    background-image: url(
        'http://ktmf.images.worldnow.com/images/2708288_G.png'
    );
}
.facebook-hover {
    background-image: url(
        'http://ktmf.images.worldnow.com/images/2708289_G.png'
    );
}

.center {
    margin:0px auto;
}

HTML：

<html>
<head>
</head>
<body>
    <div class="center">
        <a href="https://twitter.com/" target="_blank">
            <span class="twitter-hover social-slide"></span>
        </a>

        <a href="https://www.facebook.com/pages/" target="_blank"> 
            <span class="facebook-hover social-slide"> </span>
        </a>
        <br>
        <br>

        <p>© 2013 </p>
    </div>
</body>
</html>

Answer 1

您需要在该div上设置一个宽度，以使该方法正常工作。

为了所有人：

.center {
    width: 800px;
    margin: 0 auto;
}

或者只是那个（没有额外的课程/ ID）

body > .center {
    width: 800px;
}

虽然我会建议使用'容器'或类似的ID，然后为其指定宽度（#container）

Answer 2

您可以在课程text-align:center;中撰写.center。这可能适合你。

Answer 3

如果你不介意解释它是什么我错了会很棒的。

发生的事情是你将div居中，但默认情况下它将填充其父容器，在这种情况下是你的<body>元素。因此，对margin: 0px auto执行<div>会使div居中，但它的行为就像设置为width:100%

一样

另外，为了防止布局问题，您应该清除float:right某处。

元素未正确居中

3 个答案: