ttmt ttmt - 3 months ago 5
CSS Question

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;
}
}

kcp kcp
Answer

Add text-align to form class.

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

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

Comments