如何将这行文字居中？

Question

我有一个“联系”页面，其中三个图标水平排列，分别用于“手机”，“电子邮件”和“脸谱”。每个图标下方都有一些文字，如电话号码，电子邮件地址和Facebook链接。

除了电子邮件地址文字向右碰了一下之外，它们都集中在一起。我无法弄清楚是什么造成的。其他一切都集中在一起。它可能是我忽视的显而易见的东西。

ActiveMQ

#contact {
  clear: both;
  position: relative;
  width: 100%;
  float: left;
  display: block;
}
#contact img {
  width: 100%;
  overflow: hidden;
}
#phone {
  background: yellow;
  width: 300px;
  height: 30px;
  display: block;
  float: left;
}
#email {
  background: cyan;
  width: 300px;
  height: 30px;
  display: block;
  float: left;
}
#fbc {
  background: pink;
  width: 300px;
  height: 30px;
  display: block;
  float: left;
}
#contactcont {
  display: block;
  clear: both;
  height: 350px;
  width: 960px;
  margin-left: auto;
  Margin-right: auto;
}

Answer 1

快速浏览一下你的css后，它并不像你在使用text-align那样。如果你在css中为每个图标父div使用text-align：center，你应该得到你想要的结果。