Question

https://jsfiddle.net/nathanahartmann/5shg6vn7/3/

因此，我一直在尝试使此无序列表居中。 text-align：center;工作正常，但是列表中的内容（图片和文字）为页面的主要内容。我只是希望它能完全居中。我尝试摆脱填充和边距。我试过保证金：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;
}

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

Answer 2

.mainImage保持不变

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

.mainImageUl ul中的

将更改为.mainImageUl

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

.mainImageUl li仅当您只想在每个图像之间留出空间时才应使用空白</ p>

.mainImageUl li{
          margin: 30px 0;
        }

Answer 3

尝试在添加您的设置之前清除浏览器的CSS设置另外最好共享完整的样式表，我们应该知道是否存在冲突或继承

CSS中的无序列表不会居中

3 个答案: