在Bootstrap CSS中居中列表

本文介绍了在Bootstrap CSS中居中列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

重复报告后编辑

道歉我认为建议的重复可能实际上是重复的。我先试了一下，这对我来说并不起作用，因此出现了一个新的问题。看了新的建议答案后，我意识到我的问题可能是我正在使用的工具（codepen.io）的开箱即用设置。我想我可能需要看看这个工具，而不是！（无论是工具还是缺省的bootstrap版本，我还没有检查）。谢谢。

我正在做一个非常麻烦的小页面来尝试获得一些前端技巧。我认为非常基本的东西，但我正在努力在我的页面上列出一个列表。基本上我已经插入引导程序，我相信这些内置的CSS类之一是添加项目符号到我认为是好的无序列表。当我居中文本，虽然项目符号点在页面的左侧，而文本居中。我想也许答案是将该部分分成3列，并将我的列表放在中间列，这在某种程度上起作用，但是当我尝试不同的屏幕尺寸时我转移了一下（我认为引导的重点在于便于处理响应式设计！）

无论如何，我想知道是否有人可以给我一个提示，让我知道如何将我的列表放在一个位置，

项目1

项目2
3

但是在页面的中心位置b）不管屏幕尺寸如何都保持居中？

这是粗略的html。我试图削减一点，以保持要领，但让我知道，如果更多的信息将有所帮助。我试过各种基于CSS的方法，都失败了，但我认为（也许错了！）真的答案应该是一个引导类？所以都留下了我试图引导尝试的示例代码。事实上，虽然我只是好奇，看看它应该如何做，所以一个CSS的答案将同样很好的赞赏！

 所以我想你的问题在于你的 code>到 .container> .row> .text-left 将 ul 放在中间。   code> 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 =stylesheet/>< div class =well text-center maindiv> < h1 style =color：greenclass =text-primary text-center> Mighty Diamonds< / h1> < h3 class =text-center>为百万人带来快乐的乐队< / h3> < div id =div1class =well text-center> < div id =div2> Mighty Diamonds是来自牙买加的乐队< / div> < / DIV> < h3 class =text-center;>简介Biog< / h3> < p class =text-left body-para> [Paragraph text]< / p> < h3> Studio相册< / h3> < div class =container> < div class =row> < div class =col-xs-4>< / div> < div class =col-xs-4 text-left> < UL> <李><跨度> 1964< /跨度> - 相簿1< / li> <李><跨度> 1966< /跨度> - 相簿2< / li> <李><跨度> 1967< /跨度> - 正版专辑卷。 2'; /锂> <李><跨度> 1996< /跨度> - 相册4中的问候语< / li> <李><跨度> 1998< /跨度> - 火球< / li> <李><跨度> 2009< /跨度> - 从爱与巴黎< / li> <李><跨度> 2007< /跨度> - 在正确的轨道上< / li> <李><跨度> 2012< /跨度> - 随我而行专辑< / li> <李><跨度> 2016< /跨度> -  Platinum Ska< / li> < / UL> < / DIV> < div class =col-xs-4>< / div> < / DIV> < / div>< / div>

解决方案（如果 flexbox 是一个选项）：

.container> .row> .text-left {display：flex; / / code>
< link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< div class =well text-center maindiv> < h1 style =color：greenclass =text-primary text-center> Mighty Diamonds< / h1> < h3 class =text-center>为百万人带来快乐的乐队< / h3> < div id =div1class =well text-center> < div id =div2> Mighty Diamonds是来自牙买加的乐队< / div> < / DIV> < h3 class =text-center;>简介Biog< / h3> < p class =text-left body-para> [Paragraph text]< / p> < h3> Studio相册< / h3> < div class =container> < div class =row> < div class =col-xs-4>< / div> < div class =col-xs-4 text-left> < UL> <李><跨度> 1964< /跨度> - 相簿1< / li> <李><跨度> 1966< /跨度> - 相簿2< / li> <李><跨度> 1967< /跨度> - 正版专辑卷。 2'; /锂> <李><跨度> 1996< /跨度> - 相册4中的问候语< / li> <李><跨度> 1998< /跨度> - 火球< / li> <李><跨度> 2009< /跨度> - 从爱与巴黎< / li> <李><跨度> 2007< /跨度> - 在正确的轨道上< / li> <李><跨度> 2012< /跨度> - 随我而行专辑< / li> <李><跨度> 2016< /跨度> - Platinum Ska< / li> < / UL> < / DIV> < div class =col-xs-4>< / div> < / DIV> < / div>< / div>

Edit after duplicate report

Apologies I think the suggested duplicate may actually be a duplicate. I tried it first and it didn't work for me hence a new question. Having looked again with the new suggested answer I realise my issues are probably with the out of the box settings of the tool I am using (codepen.io). I think I probably need to look at this tool instead! (whether its's the tool or the default version of bootstrap I haven't checked yet). Thanks.

I am doing a very noddy little page to try and get some front end know-how. Very basic stuff I think, but I'm struggling to centre a list on my page. Essentially I have plugged in bootstrap and I believe one of these built css classes is adding bullet points to the unordered list which I think is good. When I centre the text though the bullet points go to the left of the page while the text is centred. I thought maybe the answer was to split that section into 3 columns and put my list in the middle column which works to an extent but shifts about when I try different screen sizes (I thought the point of bootstrap was top facilitate handling responsive design!?)

Anyway I wondered if anyone could give me a hint on how to centre my list in a way that it will a) be left justified so that it is along the lines of

Item 1
Item 2
Item 3

but in the centre of the page and b) remain centred regardless of screen sizes ?

This is the rough html. I've tried to cut it down a bit to keep to the essentials but let me know if more information would help. I've tried various css based methods and all have failed but I thought (maybe wrongly!) really the answer ought to be a bootstrap class ? and so have left the example code with my attempted bootstrap attempt. In reality though I'm just curious now to see how it ought to be done so an css answer would be equally well appreciated!

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

解决方案

So I figure that your issue here is that your ul is not centered in container > row > text-left

Add display: inline-block to .container > .row > .text-left > ul to let it take as much width as its contents
Add text-align: center to .container > .row > .text-left to center the ul inside.
Add text-align: left to the ul to justify the list to left.

See demo below:

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

A more simple solution (if flexbox is an option):

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

这篇关于在Bootstrap CSS中居中列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

item