使用Bootstrap 4 beta在div中水平居中选择[重复]答案

【问题标题】：Horizontal center a select in a div with Bootstrap 4 beta [duplicate]使用Bootstrap 4 beta在div中水平居中选择[重复]
【发布时间】：2018-07-03 14:37:24
【问题描述】：

我不知道如何在我的 div 中将我的选择居中。

<!--PAGE CONTENT-->
<main role="main" class="container-fluid">       
    <div class="row text-center justify-content-center"  style="border: 1px solid red;">   
        <!--SELECT-->
        <select id="selectList" style="width: 200px;">
            <option></option>
            <option value="attendance">Närvaro</option>
            <option value="students">Elever</option>
        </select>
        <hr>

        <!--Js Content-->
        <div id="jsContent"></div>
    </div>
</main>

我尝试了不同的引导类，但没有结果。

小提琴：
https://jsfiddle.net/o9b17p2d/38/

更新
在寻找这个问题的答案时，我只发现“垂直”居中。这就是为什么我认为这个问题应该留在主题中的水平！

【问题讨论】：

您在该行中还有hr 和一个 div 元素。那么你说的中心是什么意思？

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

select 和其他内容应该在一个Bootstrap col-* 里面，而不是直接放在row 里面。只需使用mx-auto 居中即可。

https://www.codeply.com/go/L2IUUMbdgm

<main role="main" class="container-fluid">       
        <div class="row text-center justify-content-center"  style="border: 1px solid red;">   
        <div class="col-12">

            <!--SELECT-->
            <select id="selectList" class="mx-auto" style="width: 200px;">
                <option></option>
                <option value="attendance">Närvaro</option>
                <option value="students">Elever</option>
            </select>
            <hr>

            <!--Js Content-->
            <div id="jsContent"></div>
             </div>
        </div>
</main>

【讨论】：

【解决方案2】：

鉴于您使用的是 Bootstrap 4，您可以使用 flex 来居中元素。它真的很干净。

您需要将d-flex添加到容器中，并保留justify-content-center

我在row 元素内添加了一个包装器，以便所有三个元素（hr、select 和div.jsContent）都居中。

<!--PAGE CONTENT-->
<main role="main" class="container-fluid">       
    <div class="row d-flex justify-content-center"  style="border: 1px solid red;">   
        <!--SELECT-->
        <div style="border: 1px solid blue;">
          <select id="selectList" style="width: 200px;">
              <option></option>
              <option value="attendance">Närvaro</option>
              <option value="students">Elever</option>
          </select>
          <hr>

          <!--Js Content-->
          <div id="jsContent">
            JS Content
          </div>

        </div>
    </div>
</main>

https://jsfiddle.net/ramses_lopezs/kwshdgg6/

【讨论】：

【解决方案3】：

如question中所述：

<!--PAGE CONTENT-->
<main role="main" class="container-fluid">       
    <div class="row text-center justify-content-center"  style="border: 1px solid red; width: 100%; position: absolute">   
        <!--SELECT-->
        <select id="selectList" style="width: 200px; position: relative; left: 50%; margin-left: -100px; ">
            <option></option>
            <option value="attendance">Närvaro</option>
            <option value="students">Elever</option>
        </select>
        <hr>

        <!--Js Content-->
        <div id="jsContent"></div>
    </div>
</main>

Fiddle

【讨论】：

是否推荐或使用负边距值？
@PriyaPayyavula 我不会说这是最佳实践。但我不是这方面的专家。
哦，好的。感谢您尝试澄清它。