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

Question

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

超级简单，但它快把我逼疯了。

我只需要把选择菜单和标签(红框)放在容器(绿框)的中间。

我已经尝试了所有我能想到的方法，而不是添加填充或边距来推动盒子。

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

<<p> jsFiddle例子/strong>

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

Answer 2

添加text-align到form class。

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

完整解决方案:https://jsfiddle.net/hs0bxyny/