0

所以我觉得很愚蠢，我无法弄清楚，但我的问题如下：

我有一个页脚，在页脚内我有 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;
}
4

5 回答 5

2

您的文本#footerText不会居中，因为#footerText没有指定的宽度。目前它的宽度是auto，默认是 ，所以会收缩到里面文字的宽度；正如我所看到的，您已经尝试过，无论是text-align:center自动边距还是自动边距都无法解决此问题。

如果要一直#facebook浮动到页脚的左侧，可以将页脚的剩余宽度设置为：#footerText

#footerText {
    float:left;
    font-size: 11px;
    text-align: center;
    width: 931px;
    margin: 20px 0;
}
于 2013-07-02T16:11:27.753 回答
2

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

#wrap {width: 400px; margin: auto;}
于 2013-07-02T16:09:14.820 回答
1

您可以尝试使用绝对位置将 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;
}

演示

于 2013-07-02T16:24:15.370 回答
0

#footer只需给出atext-align:center并将其中的其他元素设置为.会容易得多display:inline。查看演示：http: //jsfiddle.net/pUKwJ/

于 2013-07-02T16:12:41.960 回答
-1 
#facebook:
{
     display: inline-block;
     text-align: center;
}
#footer-text
{
     display: inline-block;
     text-align: center;
     vertical-align: center;
}
于 2013-07-02T16:11:02.013 回答