将文本项列表定位到中心答案

【问题标题】：Positioning list of text items to center将文本项列表定位到中心
【发布时间】：2018-01-19 19:11:37
【问题描述】：

我正在尝试修改我网站的主题。所有内容都已居中对齐。

在这方面，我想将文本项列表对齐到中心。下面是我正在使用的 CSS：

.recent_news_css {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    text-align: center;
}

为了便于理解，我也在这个 div 类的父级周围画了一个红色边框。请看下面的截图。

我很惊讶地看到文本和项目符号点符号不在中心。有什么建议吗？

【问题讨论】：

这里是同样的问题和解决方案stackoverflow.com/questions/19443013/…
如果仍然无法解决，请提供小提琴/笔链接
^^^ 或使用相关的 HTML 示例更新您的问题
@Panther 和 Wh1T3h4Ck5：这是js-fiddle。 HTML 由 Drupal 框架生成。因此它太大了。我真的很抱歉。

标签： html css

【解决方案1】：

使用margin:0 auto; 代替自动。它会起作用的。

.recent_news_css {
margin: 0 auto;
width: 50%;
border: 3px solid green;
text-align: center;
}

【讨论】：

它没有用。实际上，即使在使用margin:0 auto 之后，UI 也没有任何变化。
两种方式都将margin-left 和margin-right 设置为auto。在这种情况下，顶部和底部边距无关紧要，因此 margin 属性 auto 或 0 auto 的值无关紧要
这里是js-fiddle。 HTML 由 Drupal 框架生成。因此它太大了。我真的为它的长 HTML 和 CSS 道歉。非常感谢。

【解决方案2】：

你在找这样的东西吗？

#parent{
  border: 3px solid red;
  width:500px;
}

.recent_news_css {
    margin: auto;
    width: 100px;
    border: 3px solid green;
    text-align: center;
    padding: 35%;
}


<body>
  <div id="parent">
      <ul class="recent_news_css">
        <li>
          some Text
        </li>
        <li>
           some Text
        </li>
        <li>
          some Text
        </li>
      </ul>
    </div>
</body>

https://jsfiddle.net/xm3qh3h8/

【讨论】：

我添加了以下 CSS。 .recent-news-css { margin: 0 auto; width: 50%; border: 3px solid green; text-align: center; } .recent-news-css li{ width:100%; display:block; text-align: center; } .recent-news-css ul{ text-align: center; } 很遗憾，它不起作用。 请看截图here
这里是js-fiddle。 HTML 由 Drupal 框架生成。因此它太大了。我真的为它的长 HTML 和 CSS 道歉。非常感谢。

【解决方案3】：

我认为li 需要占用所有空间尝试

li{
 width:100%;
 display:block;
 text-align: center;
}

【讨论】：

我添加了以下 CSS。 .recent-news-css { margin: 0 auto; width: 50%; border: 3px solid green; text-align: center; } .recent-news-css li{ width:100%; display:block; text-align: center; } .recent-news-css ul{ text-align: center; } 很遗憾，它不起作用。 请看截图here 这一次，我看不到项目符号点符号。
在你的截图中你没有添加text-align:center;到你的li css
很抱歉。请看这个link
这里是js-fiddle。 HTML 由 Drupal 框架生成。因此它太大了。我真的很抱歉。我相信一些 CSS 属性会相互干扰。感谢您的帮助。
ul#views-ticker-vTicker-list-recent_news 删除位置：绝对，这都在你的内联样式中

【解决方案4】：

因为您将 div 设置为 text-align:center。

这是不可能的。你应该在li标签上添加样式“text-align:center”。

像这样，见下图

.view-content ul li{
			text-align: center;
		}

【讨论】：

我添加了以下 CSS。 .recent-news-css { margin: 0 auto; width: 50%; border: 3px solid green; text-align: center; } .recent-news-css li{ width:100%; display:block; text-align: center; } .recent-news-css ul{ text-align: center; } 很遗憾，它不起作用。 请看截图here
这里是js-fiddle。 HTML 由 Drupal 框架生成。因此它太大了。我真的为它的长 HTML 和 CSS 道歉。非常感谢。