Question

我有<div>我正在尝试排队，因此所有文字都是vertical-align: middle;

<div 
    class="col-md-6" 
    style="padding-right: 0px; vertical-align: ">
    <select 
        class="DropDownListDark submenu-dropdown" 
        id="SortProperties_SortBy" 
        name="SortProperties.SortBy" onchange="sortList()" 
        style="float: right; vertical-align: middle; ">
        <option value="Title desc">Title (desc)</option>
    </select>
    <span style="float: right; vertical-align: middle; height: 100%; ">Sort by: &nbsp;</span>
</div>

但是，文字仍位于<div>的顶部。

当我检查<span>并查看计算值时，我没有看到任何会导致这种情况的内容：

box-sizing：border-box
  显示：块
  浮动：右   高度：15px
  line-height：15.7143px
  text-align：left
  vertical-align：middle
  宽度：44px

包含<div>的内容包含：

box-sizing：border-box
  显示：块
  float：left
  高度：28px
  line-height：15.7143px
  最小高度：1px
  padding-left：15px
  padding-right：0px
  职位：亲属   text-align：left
  vertical-align：middle
  宽度：495px

更改它们以使用display: inline-block;也无法解决此问题。 “排序依据：”文本仍然在选择控件的顶部对齐。

我该如何解决这个问题？

Answer 1

在display: table-cell而不是div上尝试display: block。

此外，您可以在此处了解如何使用vertical-align： http://phrogz.net/css/vertical-align/

Answer 2

尝试将if(value1.equals("a")||value1.equals("A")||value1.equals("e"))的{{1}}设置为与line-height的{{1}}相同的值。所以在你的情况下：

行高：28px;

跨度文本位于顶部而不是中间

2 个答案: