html - DIV UL 内容不在 UL 中心

Question

我正在为客户处理电子邮件，但这个列表/表格让我很困惑。这是视觉显示。

如您所见，我基本上有 3 列，每列由单独的 <ul> 组成.问题是它们没有与 <h3> 对齐多于。当我点击 <ul>在 DW 的实时 View 中，我可以看到内容是右对齐的。

.navlist {
  background-color: #99a6b1;
  height: 400px;
  padding-top: 50px;
}
.navlist ul {
  display: inline-table;
  margin: 0 auto;
}
.navlist li {
  list-style-type: none;
  color: #ececed;
  font-size: 16px;
  padding-bottom: 10px;
  text-align: center;
}

<section>
  <div class="navlist" align="center">
    <h3 style="color: #ececed; padding-bottom: 20px;">Our Commitment</h3>
    <ul>
      <li>
        <img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efb69de4bb1fe2fd2a37/1479143354215/V3DG+Web+Icons-04.png?format=300w" alt "comprehensive services" height="150px">
      </li>
      <li>ComprehensivevServices</li>
    </ul>
    <ul>
      <li>
        <img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efc329687f358474b73a/1479143366452/V3DG+Web+Icons-05.png?format=300w" alt "Dependable Support" height="150px">
      </li>
      <li>Dependable Service</li>
    </ul>
    <ul>
      <li>
        <img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efd0414fb518a2c06557/1479143379620/?format=300w" alt "Easy To Work With" height="150px">
      </li>
      <li>Easy To Work With</li>
    </ul>
  </div>
</section>

我只是希望它按应有的方式排列。预先感谢您的帮助。

Answer 1

您是否尝试过删除“ul”的填充？

.navlist ul{
    display: inline-table;
    margin: 0 auto;
    padding-left: 0;
}

这将使您的内容更加居中。