DIV ULコンテンツがUL内でセンタリングされていない

Question

私はクライアントの電子メールに取り組んでいます。このリスト/テーブルは私を困惑させています。ここに視覚的な表示があります。

あなたが見ることができるように、私は基本的に3列、別々の<ul>によって行われた各を持っています。問題は、上記の<h3>と一致していないことです。 DWのライブビューで<ul>をクリックすると、コンテンツが右揃えになっていることがわかります。

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

これは、もう少しあなたのコンテンツを中心にします。

Answer 2

のli項目間の距離を保つために.navlist ul

にpadding-left: 0を追加し、あなたには、いくつかのマージンは左右の追加CA：

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

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

<section> 
 
\t \t <div class="navlist" align="center"> 
 
\t \t \t <h3 style="color: #ececed; padding-bottom: 20px;">Our Commitment</h3> 
 
\t \t \t <ul> 
 
\t \t \t \t <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> 
 
\t \t \t \t <li>ComprehensivevServices</li> 
 
\t \t \t </ul> 
 
\t \t \t <ul> 
 
\t \t \t \t <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> 
 
\t \t \t \t <li>Dependable Service</li> 
 
\t \t \t </ul> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efd0414fb518a2c06557/1479143379620/?format=300w" alt"Easy To Work With" height="150px"></li> 
 
\t \t \t \t <li>Easy To Work With</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </section>