html - 如何设置宽度较小的表格单元格居中

Question

我正在尝试创建联系表单，但我的容器有问题，它出现在左侧但我希望它居中，我不想使用绝对定位，有人可以帮助我吗？

#contactustitle {
  width: 100vw;
  height: 18vh;
  display: table;
  background: transparent;
  z-index: 1;
}

#contactustitle>h1 {
  color: #fff;
  font-family: raleway-bold;
  font-size: 35px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  display: table-cell;
}

.whitebg {
  width: 100vw;
  height: 82vh;
  background: #fff;
}

#contactus {
  width: 70vw;
  height: 82vh;
  display: table-cell;
  vertical-align: middle;
  background: #fff;
  text-align: center;
  margin: 0 auto;
}

.whitebg .container {
  display: table-cell;
  vertical-align: middle;
}

#contactus .contactinfo {
  float: left;
  vertical-align: middle;
  display: table-cell;
  max-width: 40vw;
}

#contactus .contactinfo>li {
  list-style: none;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 15px;
}

#contactus .contactinfo>li>i,
#contactus .contactinfo>li>h5,
#contactus .contactinfo>li>p {
  float: left;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin-right: 10px;
}

#contactus .contactinfo>li>i {
  font-size: 20px;
}

#contactus .contactinfo>li>h5 {
  text-transform: uppercase;
  font-family: raleway-semibold;
}

#contactus .contactinfo>li>p {
  font-family: raleway-light;
  text-align: left;
  float: right;
  margin-left: 20px;
  max-width: 15vw;
}

<div class="whitebg">
  <div class="container">
    <div id="contactus">
      <div class="contactinfo">
        <li>
          <i class="fa fa-street-view"></i>
          <h5>Address:</h5>
          <p>Lorem ipsium.</p>
          <br></br>
        </li>

        <li>
          <i class="fa fa-bolt"></i>
          <h5>phone:</h5>
          <p>Lorem ipsium.</p>
          <br></br>
        </li>

        <li>
          <i class="fa fa-shield"></i>
          <h5>email:</h5>
          <p>Lorem ipsium.</p>
        </li>

        <li>
          <i class="fa fa-shield"></i>
          <h5>hours:</h5>
          <p>Lorem ipsium.</p>
        </li>
      </div>
    </div>
  </div>
</div>

我希望 id 为“contactus”的分区水平居中，我试过使用 margin: 0 auto 和 text-align-center，但它仍然在左侧。

Answer 1

使用 display:table-cell 覆盖您期望标准 block 级元素的行为。我从相关的 div 及其父容器中删除了它。

#contactustitle {
  width: 100vw;
  height: 18vh;
  display: table;
  background: transparent;
  z-index: 1;
}

#contactustitle>h1 {
  color: #fff;
  font-family: raleway-bold;
  font-size: 35px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  display: table-cell;
}

.whitebg {
  width: 100vw;
  height: 82vh;
  background: #fff;
}

#contactus {
  width: 70vw;
  height: 82vh;
  /*display: table-cell;*/
  vertical-align: middle;
  background: #fff;
  text-align: center;
  margin: 0 auto;
}

.whitebg .container {
  /*display: table-cell;*/
  vertical-align: middle;
}

#contactus .contactinfo {
  float: left;
  vertical-align: middle;
  display: table-cell;
  max-width: 40vw;
}

#contactus .contactinfo>li {
  list-style: none;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 15px;
}

#contactus .contactinfo>li>i,
#contactus .contactinfo>li>h5,
#contactus .contactinfo>li>p {
  float: left;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin-right: 10px;
}

#contactus .contactinfo>li>i {
  font-size: 20px;
}

#contactus .contactinfo>li>h5 {
  text-transform: uppercase;
  font-family: raleway-semibold;
}

#contactus .contactinfo>li>p {
  font-family: raleway-light;
  text-align: left;
  float: right;
  margin-left: 20px;
  max-width: 15vw;
}

<div class="whitebg">
  <div class="container">
    <div id="contactus">
      <div class="contactinfo">
        <li>
          <i class="fa fa-street-view"></i>
          <h5>Address:</h5>
          <p>Lorem ipsium.</p>
          <br></br>
        </li>

        <li>
          <i class="fa fa-bolt"></i>
          <h5>phone:</h5>
          <p>Lorem ipsium.</p>
          <br></br>
        </li>

        <li>
          <i class="fa fa-shield"></i>
          <h5>email:</h5>
          <p>Lorem ipsium.</p>
        </li>

        <li>
          <i class="fa fa-shield"></i>
          <h5>hours:</h5>
          <p>Lorem ipsium.</p>
        </li>
      </div>
    </div>
  </div>
</div>