如何在引导程序中将药丸居中答案

【问题标题】：How to center pills in bootstrap如何在引导程序中将药丸居中
【发布时间】：2021-02-23 21:01:04
【问题描述】：

我需要将我的输出放在中心，但由于某些原因，对齐没有进入中心和响应，任何想法如何完成，我的代码如下。

<div class="abc"  style="width:50%;margin:0 auto;text-align:center;">
<ul class="nav nav-tabs" id="myTab" role="tablist"style="width: 390px" >
  <li class="nav-item" role="presentation"  >
      
     
    <button class="nav-link active"  id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="1contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">..ssdd.</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">..werwr.</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">.werwerwer..</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="1contact-tab">.werwerwer..</div>
</div>
</div>

【问题讨论】：

您究竟需要居中哪一部分？只是整个.abc div？
欢迎来到 SO。请在发布新问题之前尝试搜索，我发现很多示例都在搜索您的确切标题。如果您已经进行了研究并尝试了这些方法，但它们没有帮助，请更新您的问题以解释为什么它们不起作用等等。stackoverflow.com/questions/7165423/…、stackoverflow.com/questions/12434645/center-pills-in-bootstrap、stackoverflow.com/questions/48832139/… 等等。
这能回答你的问题吗？ Twitter Bootstrap: Center Pills

标签： twitter-bootstrap

【解决方案1】：

您可以将justify-content-center w-100 类添加到您的#myTab 元素中，这将使您的药丸相对于您的#myTab 元素居中，这将与您的内容一样宽

【讨论】：