在 Bootstrap CSS 中居中列表 [重复]

Question

重复报告后编辑

抱歉，我认为建议的副本实际上可能是副本。我先尝试了它，但它对我不起作用，因此提出了一个新问题。再次查看新建议的答案后，我意识到我的问题可能与我正在使用的工具（codepen.io）的开箱即用设置有关。我想我可能需要看看这个工具！ （它是工具还是引导程序的默认版本我还没有检查过）。谢谢。

我正在做一个非常点头的小页面来尝试获取一些前端知识。我认为非常基本的东西，但我正在努力在我的页面上集中一个列表。基本上我已经插入了引导程序，并且我相信这些构建的 css 类之一正在将项目符号添加到我认为很好的无序列表中。当我将文本居中时，项目符号点会在文本居中时转到页面的左侧。我想也许答案是将该部分分成 3 列并将我的列表放在中间列中，这在一定程度上有效，但是当我尝试不同的屏幕尺寸时会发生变化（我认为引导程序的重点是最有助于处理响应式设计！？ )

无论如何，我想知道是否有人可以给我一个提示，告诉我如何以一种方式将我的列表居中 a) 左对齐，以便它符合

• 项目 1
• 第 2 项
• 项目 3

但是在页面的中心并且 b) 无论屏幕大小如何都保持居中？

这是粗略的 html。我试图减少一点以保持基本要素，但如果更多信息会有所帮助，请告诉我。我尝试了各种基于 css 的方法，但都失败了，但我认为（可能是错误的！）真的答案应该是引导类吗？因此，我尝试引导尝试留下了示例代码。实际上，尽管我现在只是好奇应该如何完成它，因此 css 答案将同样受到赞赏！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center maindiv">
  <h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>
  <h3 class="text-center">The band that brought joy to the hearts of millions</h3>
  <div id="div1" class="well text-center">
    <div id="div2">
      The Mighty Diamonds were a band from Jamaica</div>
  </div>
  <h3 class="text-center;">A Brief Biog</h3>
  <p class="text-left body-para">[Paragraph text]</p>
  <h3>Studio albums</h3>
  <div class="container">
    <div class="row">
      <div class="col-xs-4"></div>
      <div class="col-xs-4 text-left">
        <ul>
          <li><span>1964</span> - Album 1</li>
          <li><span>1966</span> - Album 2</li>
          <li><span>1967</span> - Authentic Album Vol. 2</li>
          <li><span>1996</span> - Greetings from Album 4</li>
          <li><span>1998</span> - Ball of Fire</li>
          <li><span>2009</span> - From Paris with Love</li>
          <li><span>2007</span> - On the Right Track</li>
          <li><span>2012</span> - Walk With Me Album</li>
          <li><span>2016</span> - Platinum Ska</li>
        </ul>
      </div>
      <div class="col-xs-4"></div>
    </div>
  </div>
</div>

Answer 1

所以我认为您的问题是您的ul 不在container > row > text-left 中

1. 将display: inline-block 添加到.container > .row > .text-left > ul 使其与内容一样宽

2. 将text-align: center 添加到.container > .row > .text-left 以使ul 居中。

3. 将text-align: left 添加到ul 以使列表左对齐。

请看下面的演示：

.container > .row > .text-left {
  text-align: center;
}
.container > .row > .text-left > ul {
  text-align: left;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center maindiv">
  <h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>
  <h3 class="text-center">The band that brought joy to the hearts of millions</h3>
  <div id="div1" class="well text-center">
    <div id="div2">
      The Mighty Diamonds were a band from Jamaica</div>
  </div>
  <h3 class="text-center;">A Brief Biog</h3>
  <p class="text-left body-para">[Paragraph text]</p>
  <h3>Studio albums</h3>
  <div class="container">
    <div class="row">
      <div class="col-xs-4"></div>
      <div class="col-xs-4 text-left">
        <ul>
          <li><span>1964</span> - Album 1</li>
          <li><span>1966</span> - Album 2</li>
          <li><span>1967</span> - Authentic Album Vol. 2</li>
          <li><span>1996</span> - Greetings from Album 4</li>
          <li><span>1998</span> - Ball of Fire</li>
          <li><span>2009</span> - From Paris with Love</li>
          <li><span>2007</span> - On the Right Track</li>
          <li><span>2012</span> - Walk With Me Album</li>
          <li><span>2016</span> - Platinum Ska</li>
        </ul>
      </div>
      <div class="col-xs-4"></div>
    </div>
  </div>
</div>

更简单的解决方案（如果flexbox 是一个选项）：

.container > .row > .text-left {
  display: flex;
  justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center maindiv">
  <h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>
  <h3 class="text-center">The band that brought joy to the hearts of millions</h3>
  <div id="div1" class="well text-center">
    <div id="div2">
      The Mighty Diamonds were a band from Jamaica</div>
  </div>
  <h3 class="text-center;">A Brief Biog</h3>
  <p class="text-left body-para">[Paragraph text]</p>
  <h3>Studio albums</h3>
  <div class="container">
    <div class="row">
      <div class="col-xs-4"></div>
      <div class="col-xs-4 text-left">
        <ul>
          <li><span>1964</span> - Album 1</li>
          <li><span>1966</span> - Album 2</li>
          <li><span>1967</span> - Authentic Album Vol. 2</li>
          <li><span>1996</span> - Greetings from Album 4</li>
          <li><span>1998</span> - Ball of Fire</li>
          <li><span>2009</span> - From Paris with Love</li>
          <li><span>2007</span> - On the Right Track</li>
          <li><span>2012</span> - Walk With Me Album</li>
          <li><span>2016</span> - Platinum Ska</li>
        </ul>
      </div>
      <div class="col-xs-4"></div>
    </div>
  </div>
</div>