4

I cannot figure out how to center my select in my 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>

I tried difrent bootstrap classes with no result.

Fiddle:
https://jsfiddle.net/o9b17p2d/38/

UPDATE
When searching for an answer to this question i only found "VERTICAL" centering. That why i think this question should stay with the Horizontal in the Topic!

Björn C
  • 3,860
  • 10
  • 46
  • 85

3 Answers3

3

The select and other content should be inside a Bootstrap col-*, not place directly in the row. Just use mx-auto to center.

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>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
2

Given that you're using Bootstrap 4, you can use flex to center elements. It's really clean.

You need to add d-flex to the container, and keep the justify-content-center

I added a wrapper inside the row element, so that all three elements (hr, select and div.jsContent) are centered.

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

Ramses
  • 996
  • 4
  • 12
  • 28
0

As stated in this 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

flx
  • 1,560
  • 13
  • 22