CSS 中的无序列表不会居中

Question

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

Answer 1

用户代理样式将 padding-inline-start: 40px 添加到 ul 元素。

我看到你的 css 中有这个应该去掉填充，但你选择了 class .mainImageUL 和一个嵌套 ul 元素

.mainImageUl ul{
  list-style-type:none;
  margin:0px auto;
  padding:0px;

}

改成这个

.mainImageUl{
   list-style-type:none;
   margin:0px auto;
   padding:0px;
}

这将定位正确的元素并更正您的对齐问题

Answer 2

.mainImage保持不变

.mainImage{
  height:275px;
  width:275px;
}

在 .mainImageUl ul 中将更改为 .mainImageUl

.mainImageUl {
  list-style-type:none;
  margin:0px auto;
  padding:0px;
}

.mainImageUl li 仅当您只想在每个图像之间实现 space 时才应使用边距

.mainImageUl li{
          margin: 30px 0;
        }

Answer 3

尝试清除浏览器 css 设置，然后再添加您的设置也最好分享完整的风格sheet我们应该知道是否有冲突或继承

CSS 中的无序列表不会居中

Unordered List in CSS will not center

html

css

center

list

html-lists