DIV UL 콘텐츠가 UL 내에서 센터링되지 않음

클라이언트 용 전자 메일을 작성 중입니다.이 목록/테이블은 저를 혼란스럽게합니다. 다음은 시각적 인 디스플레이입니다. 당신이 볼 수 있듯이DIV UL 콘텐츠가 UL 내에서 센터링되지 않음

, 나는 기본적으로 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>

right-aligned li content within ul

. 귀하의 도움에 미리 감사드립니다.

출처

2016-11-14 Alex Bradley

내가 당신 왜 요청할 수 있습니다 이 레이아웃에 대한 목록을 사용하고 있습니까? –

[리스트가 약간 벗어나서 표시되는] 가능한 복제본 (http://stackoverflow.com/questions/8622498/list-displaying-slightly-off-centered) – TylerH

'ul'의 패딩을 제거해 보셨습니까?

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

콘텐츠를 조금 더 집중시킬 것입니다.

출처

2016-11-14 19:45:06

감사 데이빗! 나는 이것을 시도했지만 중심의 이미지에 가까운 모든 내용을 집어 넣었으므로 실제로는 중심에 더 가깝게 표시하지 않습니다. –

@AlexBradley이 답변은 질문을 해결합니다. 하지만 가장 왼쪽의 목록 항목이 가장 오른쪽보다 넓으므로 두 번째 목록 항목이 정확히 "센터의 약속"텍스트 아래에 있지 않다는 사실에 혼란 스러울 수 있습니다. 전체 목록이 있더라도. –

해결책은 세 가지 목록 항목 모두에 동일한 너비를 부여하는 것입니다. –

리 항목 사이의 거리를 유지하기 위해 .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>

출처

2016-11-14 20:20:37 Johannes

DIV UL 콘텐츠가 UL 내에서 센터링되지 않음

답변

관련 문제