html - 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 中有这个应该去掉填充但是你选择了类 .mainImageUL 和一个嵌套的 ul 元素

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

}

改成这样

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

这将针对正确的元素并纠正您的对齐问题