Centering float:left elements

Question

I am trying to center multiple elements that are placed on the same line using float:left. I tried with text-align:center and align-items:center in the div where it contains class=mainDiv but it does not make any changes and won't center any of my elements...

So my question is where should I place text-align or align items in order to center the element in the pink background (please see the picture here to see my output because it does not display well when you run the code snippet as I did not provide the whole code: )

This is my HTML code:

<form action="" method="POST">
    <div class="mainDiv"; style="background-color: pink; text-align: center;">
        <div style="float:left;" >
            <div class="form-group">
                <h5>File Type</h5>
                <select class="browser-default custom-select" name= extensions method="POST" action="/" >
                    {% for extension in extensions %}
                    <option value= "{{extension}}" SELECTED>{{extension}}</option>"
                    {% endfor %}
                </select>
            </div>
        </div>

        <div style="float:left;">
            <div class="form-group">
                <h5>Parent Folder</h5>
                <select class="browser-default custom-select" name= dirs method="POST" action="/" >
                    {% for dir in dirs %}
                    <option value= "{{dir}}" SELECTED>{{dir}}</option>"
                    {% endfor %}
                </select>
            </div>
        </div>

        <div style="float:left;" class="form-group row" >
            <div class="form-group">
                <h5>Uploaded Date</h5>
                <div class="col-10">
                    <input class="form-control" type="date" name="date" id="example-date-input">
                </div>
            </div>
        </div>
        <div style="float:left;">
            <div class="form-group">
                <h5>Parent Folder</h5>
                <select class="browser-default custom-select" name= dirs method="POST" action="/" >
                    {% for dir in dirs %}
                    <option value= "{{dir}}" SELECTED>{{dir}}</option>"
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="form-group row">
            <div class="form-group">
                <h5>Uploaded Date</h5>
                <div class="col-10">
                    <input class="form-control" type="date" name="date" id="example-date-input">
                </div>
            </div>
        </div>
    </div>

</form>

Remove `float` and use `dispaly: inline-block;` on child-elements with `text-align` and `vertical-align` on parent. — NoSkill, Jul 16 '20 at 08:11

score 1 · Accepted Answer · answered Jul 16 '20 at 08:05

Remove the floats and use flex instead like this.

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

<form action="" method="POST">
    <div class="mainDiv"; style="background-color: pink; text-align: center;">
        <div >
            <div class="form-group">
                <h5>File Type</h5>
                <select class="browser-default custom-select" name= extensions method="POST" action="/" >
                    {% for extension in extensions %}
                    <option value= "{{extension}}" SELECTED>{{extension}}</option>"
                    {% endfor %}
                </select>
            </div>
        </div>

        <div>
            <div class="form-group">
                <h5>Parent Folder</h5>
                <select class="browser-default custom-select" name= dirs method="POST" action="/" >
                    {% for dir in dirs %}
                    <option value= "{{dir}}" SELECTED>{{dir}}</option>"
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="form-group row" >
            <div class="form-group">
                <h5>Uploaded Date</h5>
                <div class="col-10">
                    <input class="form-control" type="date" name="date" id="example-date-input">
                </div>
            </div>
        </div>
        <div>
            <div class="form-group">
                <h5>Parent Folder</h5>
                <select class="browser-default custom-select" name= dirs method="POST" action="/" >
                    {% for dir in dirs %}
                    <option value= "{{dir}}" SELECTED>{{dir}}</option>"
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="form-group row">
            <div class="form-group">
                <h5>Uploaded Date</h5>
                <div class="col-10">
                    <input class="form-control" type="date" name="date" id="example-date-input">
                </div>
            </div>
        </div>
    </div>

</form>

What I did is remove all the float: left; from your divs and added display: flex; to the container to place the divs next to eachother and then justify-content: center; to center the elements.

see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score -1 · Answer 2 · answered Jul 16 '20 at 08:04

-1

You can use flex containers for solve. Description here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Jul 16 '20 at 08:04

lails

105
11

Centering float:left elements

2 Answers2