Html 推特引导：中心药丸

我的问题是你怎么能把药片放在中心

---

我已经尝试添加中间块，并将

浮动：左

更改为

浮动：中心

，但没有任何帮助。

如果希望药片居中而不是左对齐，则需要更改css。您需要指定宽度并将边距更改为自动

例如：

.tabs, .pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}

---

虽然@minaz的答案适用于宽度已知的列表，但我会提出一个不同的解决方案，即使您更改了列表的内容，该解决方案也会有效：

.tabs、.pills{
文本对齐：居中；
}
.tabs li、.tabs li{
浮动：无；
}

或在SCSS中：

.tabs、.pills{
文本对齐：居中；
li{float:none；}
}

---

这将使列表中的文本居中，并重置列表项的

float

属性，使其受

text align

属性的影响。

如果希望在可变宽度容器中放置可变宽度的药丸，我建议使用

内联块

显示类型，并向药丸容器添加一个类

下面是我如何扩展中心药丸引导的

CSS:

HTML:

这变得简单多了只需使用容器上的

文本中心

类，并将

显示：内联块

应用于

ul

。只需确保有一个换行符或段落标记将导航与容器中的任何其他元素分隔开

完成了！2个类添加，1行CSS（不要修改引导CSS文件！）

HTML:

编辑2015：正如Artur Beljajev所说，Flexbox支持现在可能需要使用它：

.center-pills {
    display: flex;
    justify-content: center;
}

或flexbox方法：

.nav药丸{
显示器：flex；
证明内容：中心；
}
使用的简单解决方案
在
nav处使用
justify资源中心

例如：


@导入url（'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css）









你好
你好
你好
引导4解决方案非常简单：

<ul class="nav justify-content-center">



如果有，就没有“浮动：中心”这样的东西。那么多的开发者在他们的生活中还有那么多的时间。如果你用谷歌搜索的话，有一些技术可以让标签居中，但是在twitter上，bs可能需要一点定制，这是很合适的，但是我不建议编辑CSS文件。我会创建我自己的CSS文件来扩展Twitter引导CSS。为引导定义960px的宽度可以帮助你集中一些否则不会集中的东西。定义宽度并使用偏移量。我推荐prrstn的解决方案。这修正了一开始就完全忽略了使用引导的意义的大小。这在语法上是不正确的。你不能像这样嵌套css规则你是对的，这是用scss写的，它允许这种嵌套。你必须拿出li部分，并指定.tabs li和.pills li，这比broox解决方案更适合我。使用broox溶液时，我的药片位置很奇怪（药片总是在下方）。谢谢分享：）你知道为什么添加此样式会在下面留下一个空间（好像有填充物）？@RachelS你使用的是哪种样式？你们有JSFIDLE吗？请注意，我使用的是Flexbox版本，当内容位于移动显示端口时，它不起作用。不过，原来的答案是有效的。@Terry谢谢你指出这一点。它做了什么？您使用了什么移动视图模式或设备？如果目标浏览器可以处理，这是最简单的解决方案。谢谢。在我的例子中，我有很多
元素，所以我使用了这个额外的
flex-wrap:wrap
将
ul.nav pills
添加到第三和第四个选择器，以防您碰巧在居中pills元素中有其他列表，就像我所做的那样
.centered pills ul.nav-pills li{display:inline；}.centered pills ul.nav-pills li a{float:left；}
<div class="col-md-12 text-center">
    <p>Copyright stuff</p>
    <ul class="nav nav-pills center-pills">
        <li><a href="#">Footer nav link</a></li>
        <li><a href="#">Footer nav link</a></li>
    </ul>
</div>

.center-pills { display: inline-block; }

.center-pills {
    display: flex;
    justify-content: center;
}

<ul class="nav justify-content-center">