Question

CLS Compliant

              <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">
                                Apple
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">
                                Banana
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">
                                Abc
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">
                                xyz
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <span class="btn btn-primary btn-file" style="float: left;">
                            Browse… <input type="file" id="uploadBtn" name="upload">
                        </span>
                    </div>


                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <!--<label class="col-sm-2 control-label">
                            Favourite food
                        </label>-->

                        <div class="checkbox">
                            <label>

                                <input type="checkbox">
                                Apple

                            </label>
                        </div>
                        <div class="checkbox">
                            <label>

                                <input type="checkbox">
                                Banana

                            </label>
                        </div>
                    </div>


                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <span class="btn btn-primary btn-file" style="float: left;">
                            Browse… <input type="file" id="uploadBtn" name="upload">
                        </span>
                    </div>


                </div>
            </div>

这里的浏览按钮位于div的顶部，我想将它带到复选框div的垂直中心。

想要My code here

之类的内容

我试过了：

 .form-group {
vertical-align: middle;
height: 100px;
}

Answer 1

Flexbox对解决此问题非常有用。将一个新类添加到您希望对齐的两个块的父 - 与您的代码一样，.row就像这样：

.flex-center {
  display: flex;
  align-items: center;
}

以下是Codepen

的工作示例

在Div垂直居中设置元素

1 个答案: