html - Bootstrap 3.3.7（未更新）和中心/中间不工作的复杂网格

Question

我正在使用 Bootstrap 3.3.7，我正在尝试制作一个布局如下的网格：

问题是将图像/文本居中到列/行的中心/中间。

• Jon Doe 在第一列居中
• Jake、Billy、Will 被设置在左侧组合框的中间。

然而它看起来像这样：

我尝试了以下方法，但没有任何运气：

.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}

.vertical-align {
    display: block;
    vertical-align: middle;
}

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

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.positionMe {
    position:center;
}

这是我的工作布局：

<form class="container">
        <div class="row table-bordered col-md-12">
            <div class="col-md-6">
                <div class="col-md-2">
                    <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 80px;" />
                </div>
                <div class="col-md-4 h4">Jon Doe</div>
            </div>
            <div class="col-md-2 top" align="center">
                <label class="control-label">Years Worked</label>
                <div class="row">
                    <div class="form-group">
                        <select class="form-control" aria-selected="False">
                            <option value="" hidden></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <select class="form-control" aria-selected="False">
                            <option value="" hidden></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <select class="form-control" aria-selected="False">
                            <option value="" hidden></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <select class="form-control" aria-selected="False">
                            <option value="" hidden></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-4" align="left">
                <div class="row">
                    <div class="col-md-1 col-md-offset-2">
                        <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 50px;" />
                    </div>
                    <div class="col-md-6 h5">Jake Johnson</div>
                </div>
                <div class="row">
                    <div class="col-md-1 col-md-offset-2">
                        <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 50px;" />
                    </div>
                    <div class="col-md-6 h5">Billy Jack</div>
                </div>
                <div class="row">
                    <div class="col-md-1 col-md-offset-2">
                        <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 50px;" />
                    </div>
                    <div class="col-md-6 h5">Will Franklin</div>
                </div>
                <div class="row">
                    <div class="col-md-1 col-md-offset-2">
                        <img src="~/Content/images/PersonSolid.svg" alt="Person Silhouette" style="height: 50px;" />
                    </div>
                    <div class=" col-md-6 h5">Jack Thomas</div>
                </div>
            </div>
        </div>
    </form>

我似乎无法让这个布局按照我需要的方式工作，我做错了什么？

反馈：如果这个场景/问题可以改进，请告诉我。

标签： htmlcsstwitter-bootstrap-3