Question

我无法弄清楚如何将我的选择集中在我的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>

我尝试了不同的bootstrap类，没有结果。

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

更新
在搜索这个问题的答案时，我只找到了＆＃34; VERTICAL＆＃34;定心。这就是为什么我认为这个问题应该与主题中的横向一致！

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

Answer 2

如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

Answer 3

鉴于您使用的是Bootstrap 4，您可以使用flex to center元素。它非常干净。

您需要将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/

水平中心选择一个div与Bootstrap 4 beta

3 个答案: