CODEWITHSUNDEEP
css
ttmt
ttmt

Reputation: 4986

css horizontally center select menu and label

I have a jsfiddle here https://jsfiddle.net/z0yjvksg/38/

Super simple but its driving me mad.

I just need to center the select menu and label (red box) in the container (green box).

I've tried everything I can think of without actually adding padding or margins to push the box across.

    .form{
        border: 1px solid green;
        padding: 10px 0;
    }

    .search-form__by{
        border: 1px solid red;
        display: inline-block;
        margin: 0 auto;
        //text-align: center:

        label{
            float: left;
            margin: 7px 10px 0 0;
        }

        select{
            width: 200px;
        }
    }

Upvotes: 0

Views: 345

Answers (2)

Kacper Polak
Kacper Polak

Reputation: 1411

Add text-align to form class.

.form{
    border: 1px solid green;
    padding: 10px 0;
    text-align:center;
}

Full solution: https://jsfiddle.net/hs0bxyny/

Upvotes: 1

j08691
j08691

Reputation: 208030

Add:

.row {
  text-align:center;
}

jsFiddle example

Or if you're using Bootstrap, add the class text-center to the row div: <div class="row text-center">

Upvotes: 2

Related Questions