Question

这是我的CSS代码：

.well-searchbox {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

上面的CSS水平对齐中间项目但不是垂直对齐，我尝试了vertical-align: middle和height: 50%，但它没有工作。

以下是我应用.well-searchbox（第一行）的HTML代码：

<div class="well-searchbox">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-md-4 control-label">Keyword</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" placeholder="Keyword">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-4 control-label">Country</label>
                    <div class="col-md-8">
                        <select class="form-control" placeholder="Country">
                            <!-- some code -->
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-4 control-label">Province</label>
                    <div class="col-md-8">
                        <select class="form-control" placeholder="Province">
                            <!-- some code -->
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-4 control-label">City</label>
                    <div class="col-md-8">
                        <select class="form-control" placeholder="City">
                            <!-- some code -->
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-4 control-label">Category</label>
                    <div class="col-md-8">
                        <select class="form-control" placeholder="Category">
                            <!-- some code -->
                        </select>
                    </div>
                </div>
                <div class="col-sm-offset-4 col-sm-5">
                    <button type="submit" class="btn btn-success">Search</button>
                </div>
            </form>
        </div>

我可以请一些指导我应该用什么属性来对齐搜索框到中间垂直？

Answer 1

您可以使用transform属性进行样式设计。

您可以在css对应元素中添加以下内容，使其垂直对齐

 .element {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

如何在CSS中间（垂直）对齐项目？

1 个答案: