Неупорядоченный список в CSS не будет центрироваться
https://jsfiddle.net/nathanahartmann/5shg6vn7/3/
Итак, я пытался центрировать этот неупорядоченный список. Выравнивание текста: центр; работал правильно, но элементы в списке (изображения и текст) для основного содержимого страницы. Я просто хочу, чтобы он был идеально отцентрован. Я пытался избавиться от отступов и полей. Я пробовал margin: 0px auto ;. Кажется, я не могу понять, что мне нужно сделать, чтобы выровнять этот UL.
.mainImage{
height:275px;
width:275px;
}
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li{
padding:0px;
display:inline-block;
float:left;
height:350px;
width:100%;
}
Ответы 3
Стили пользовательского агента добавляют padding-inline-start: 40px к элементам ul.
Я вижу, что у вас есть это в вашем css, который должен избавиться от заполнения, но вы выбираете класс .mainImageUL и вложенный элемент ul
.mainImageUl ul{
list-style-type:none;
margin:0px auto;
padding:0px;
}
измените это на это
.mainImageUl{
list-style-type:none;
margin:0px auto;
padding:0px;
}
Это нацелено на правильный элемент и устранит проблему с выравниванием.
.mainImage остался прежним
.mainImage{
height:275px;
width:275px;
}
в .mainImageUl ul изменится на .mainImageUl
.mainImageUl {
list-style-type:none;
margin:0px auto;
padding:0px;
}
.mainImageUl li следует использовать маржу только в том случае, если вы хотите добиться промежутка между каждым изображением.
.mainImageUl li{
margin: 30px 0;
}
Попробуйте очистить настройку css браузера, прежде чем добавлять свою также лучше поделиться полной таблицей стилей, мы должны знать, есть ли конфликт или наследование
Подходит ли вам использование flexbox?