html - margin 0 auto 根本不起作用

Question

我试图将中间段落置于 HTML 页脚的中心，但没有成功。我使用了 float 布局:第一段向左浮动，第三段向右浮动，第二段(中间)自动获得边距 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;
}

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; 
}

<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>