Неупорядоченный список в CSS не будет центрироваться - PullRequest
Новая
       35

Неупорядоченный список в CSS не будет центрироваться

0 голосов
/ 02 января 2019

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 ]

0 голосов
/ 02 января 2019

.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;
        }
0 голосов
/ 02 января 2019

Попробуйте очистить настройки браузера css перед добавлением своих также лучше поделиться полной таблицей стилей, которую мы должны знать, если есть конфликт или наследование

0 голосов
/ 02 января 2019

Стили агента пользователя добавляют элементы 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;
}

Это нацелит на правильный элемент и исправит проблему выравнивания

...