Question

所以我感觉非常愚蠢，我无法弄明白，但我的问题如下：

我有一个页脚，在页脚里面我有2个div，1个包含Facebook图像，1个包含版权文本。我想要做的是将它们彼此相邻，但将Facebook图像对齐到左侧，将文本对齐到中心。

HTML：

<div id="footer">
    <div id="facebook"><img src="img/FB-f-Logo__blue_29.png" alt="facebook link"></div>
    <div id="footerText"><p>© Copyright 2013. All Rights reserved.</p></div>
</div>

的CSS：

#footer {
    width: 960px;
    height: 50px;
    margin: 0 auto;
}

#facebook {
    width: 29px;
    height: 29px;
    margin-top: 20px;
    margin-bottom: 20px;
    float: left;
}

#footerText {
    float:left;
    font-size: 11px;
    text-align: center;
    margin: 20px auto 20px auto;
}

Answer 1

您可以在页脚中为两个div添加额外的“包装器”：http://jsfiddle.net/y9xpA/

#wrap {width: 400px; margin: auto;}

Answer 2

#footerText中的文字不会居中，因为#footerText没有指定的宽度。它的宽度当前为auto，这是默认值，因此它将缩小到文本内部的宽度; <{1}}或自动侧边距都不会解决这个问题，因为我可以看到你已经尝试过了。

如果您希望页脚左侧的text-align:center一直，则可以将页脚的剩余宽度设为#facebook：

#footerText

Answer 3

你可以尝试使用绝对位置将Facebook div移出页面流向左侧，然后给页脚文本一个左边距等于facebook div的宽度并使其居中：

#footer {
    width: 960px;
    height: 50px;
    position: relative;
}
#facebook {
    width: 29px;
    height: 29px;
    position: absolute;
    left: 0;
}
#footerText {
    font-size: 11px;
    text-align: center;
    margin: 20px auto 20px 29px;
}

Demo

Answer 4

让#footer成为text-align:center并将其中的其他元素设置为display:inline会更容易，更容易。查看演示：http://jsfiddle.net/pUKwJ/

Answer 5

#facebook:
{
     display: inline-block;
     text-align: center;
}
#footer-text
{
     display: inline-block;
     text-align: center;
     vertical-align: center;
}

将具有浮动左侧的div居中设置

5 个答案: