css水平居中选择菜单和标签

Question

我这里有一个 jsfiddle https://jsfiddle.net/z0yjvksg/38/

super 简单，但它让我抓狂。

我只需要将选择菜单和标签(红色框)置于容器(绿色框)的中心。

我已经尝试了所有我能想到的方法，但没有实际添加填充或边距来插入盒子。

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

Answer 1

添加:

.row {
  text-align:center;
}

jsFiddle example

或者，如果您使用的是 Bootstrap，请添加类 text-center到行 div:<div class="row text-center">