CSS中的无序列表不会居中

Posted 2023-03-29

【中文标题】CSS中的无序列表不会居中

【英文标题】：Unordered List in CSS will not center

【发布时间】：2019-05-28 18:10:29

【问题描述】：

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

【问题讨论】：

你可以选择使用 flexbox 吗？

【参考方案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;

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

【参考方案2】：

.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;
        

【参考方案3】：

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