DIV Содержимое UL не центрируется в UL

Я работаю над электронным письмом для клиента, и этот список/таблица меня озадачивают. вот визуальный дисплей.DIV Содержимое UL не центрируется в UL

Как вы можете видеть, у меня есть по существу три колонны, каждая из отдельной <ul>. Проблема в том, что они не выровнены с <h3> выше. когда я нажимаю на <ul> в режиме прямого просмотра DW, я вижу, что контент выровнен по правому краю.

right-aligned li content within 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>

Я бы так же, как он выстраиваться так, как надо. Заранее спасибо за вашу помощь.

источник

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 Этот ответ _does_ решить ваш вопрос. Но я считаю, что вас может смутить тот факт, что крайний левый элемент списка шире, чем самый правый, так что второй элемент списка не находится точно в центре под текстом «Наше обязательство». Даже если весь список. –

Решение будет состоять в том, чтобы все три элемента списка имели одинаковую ширину. –

Добавить padding-left: 0 в .navlist ul

Чтобы сохранить расстояние между элементами Ли, вы ча добавить некоторый запас влево и вправо:

.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

ответ

Смежные вопросы