html - 将 div 与垂直居中对齐右对齐

Question

这是我的代码:

<div class="row">
    <div class="col-md-12 table">
        <div class="middle">Title XPTO</div>
        <div class="middle">Display:</div>
        <select class="form-control">
            <option label="10" selected="selected" value="10">10</option>
            <option label="25" value="25">25</option>
            <option label="50" value="50">50</option>
        </select>
    </div>
</div>

CSS:

.table {
    display: table !important;
}
.middle {
    display: table-cell !important;
    vertical-align: middle;
}

演示: https://jsfiddle.net/jkf2L49e/

我想将文本“Display:”放在离select 元素最近的地方。并且选择必须尽可能正确(位置)。执行此操作并使其响应的最佳方法是什么？

Answer 1

您还应该制作 <select>也是表格布局的一部分，所以只需用另一个 <div> 包裹它.标记将是这样的:

<div class="col-md-12 table">
    <div class="left">Title XPTO</div>
    <div class="middle">Display:</div>
    <div class="right">
        <select class="form-control">
            <option label="10" selected="selected" value="10">10</option>
            <option label="25" value="25">25</option>
            <option label="50" value="50">50</option>
        </select>
    </div>
</div>

要将文本右对齐，您可以简单地使用 text-align:right在中间的单元格中。 CSS 将是这样的(在下面的评论中进行了调整)。

.table {
    display: table;
}
.table > div {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}
.table .middle {
    text-align: right;
    width: 100%;
}
.table select {
    width: auto;
}

更新演示 - https://jsfiddle.net/jkf2L49e/4/