Question

我试图将中间段放在HTML页脚中，但没有成功。我使用了浮点布局：第一段浮动到左边，第三段浮动到右边，第二段（中间）段得到边距0自动。我还指定每个段落的宽度为250px。有人可以解释一下我做错了什么吗？

footer {
background: #fff;
border-top: 1px solid #ece9e9;
border-bottom: 1px solid #ece9e9;
clear: both;
overflow: hidden;
}
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
}
footer .footer-content > div {
width: 250px;
display: inline-block;
}
footer h5 {
font-size: 15px;
margin-bottom: 25px;
text-transform: uppercase;
}
footer p {
margin-bottom: 25px;
}
.footer-content .footerServices {
background-color: yellow;
float: left;
}
.footer-content .footerNewsLetter {
background-color: yellow;
float: right;
}
.footer-content .footerContact {
background-color: blue;
margin: 0 auto;
}

<footer class="footer">
  <div class="footer-content">
    <div class="footerServices">
      <h5>Services</h5>
      <p>
        first paragraph
      </p>
    </div>
    <div class="footerContact">
      <h5>Contact Us</h5>
      <p>
        second paragraph
      </p>
    </div>
    <div class="footerNewsLetter">
      <h5>Sign To Newsletter</h5>
      <p>
        third paragraph
      </p>
    </div>
  </div>
</footer>

Answer 1

只需将text-align:center添加到.footer-content div：

footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
text-align:center;
}

＆＃13;

footer {
background: #fff;
border-top: 1px solid #ece9e9;
border-bottom: 1px solid #ece9e9;
clear: both;
overflow: hidden;
}
footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;
text-align:center;
}
footer .footer-content > div {
width: 250px;
display: inline-block;
}
footer h5 {
font-size: 15px;
margin-bottom: 25px;
text-transform: uppercase;
}
footer p {
margin-bottom: 25px;
}
.footer-content .footerServices {
background-color: yellow;
float: left;
}
.footer-content .footerNewsLetter {
background-color: yellow;
float: right;
}
.footer-content .footerContact {
background-color: blue;
margin: 0 auto;
}
.footer-content .footerServices,.footer-content .footerNewsLetter,.footer-content .footerContact{
 text-align:left; 
}

＆＃13;

<footer class="footer">
  <div class="footer-content">
    <div class="footerServices">
      <h5>Services</h5>
      <p>
        first paragraph
      </p>
    </div>
    <div class="footerContact">
      <h5>Contact Us</h5>
      <p>
        second paragraph
      </p>
    </div>
    <div class="footerNewsLetter">
      <h5>Sign To Newsletter</h5>
      <p>
        third paragraph
      </p>
    </div>
  </div>
</footer>

＆＃13;

Answer 2

要使margin: auto生效，您需要将中间段设置为display:block

Answer 3

您有一些概念上的错误，首先，您为所有display:inline-block设置.footer-content > div，然后将float应用于第一个和第三个。

请查看定义与您非常相似的方案的this mine question and relative answer。左右两个相对的列，以及一个使其宽度适应剩余空间的中心列。

Answer 4

正如@ j08691所说添加text-align：center;还添加float：none;

footer .footer-content {
margin: 0 auto;
padding: 40px 0 20px 0;
width: 960px;
background-color: red;text-align:center; float:none;
}

Answer 5

您是否尝试将所有div向左浮动？这样它们将彼此水平堆叠。

然后，您可以使用边距来使中间想要的边距居中。

保证金0自动无法正常工作

5 个答案: