Question

我正在尝试在下拉菜单中垂直对齐文字。我一直在遵循Stackoverflow中的建议并使用display：table-cell和vertical-align：middle但它似乎不起作用。它只是将每个文本粘贴在每个下拉单元格的顶部。

我的下拉菜单是#results。

代码和CSS如下所示。

 <div class="container">
  <div id="jumbo" class="jumbotron">
   <input type="text" value="" placeholder="Search" id="keyword">
   <input type="button" id="myBtn" value="Go">
   <div id="results">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
   </div>
   <div class="row">
    <div class="col-md-12" id="trainstation" style="background-color:blue;width:100%;margin:auto;height:100px;">
    </div>
    <div class="clearfix visible-lg"></div>
   </div>
  </div>
 </div>

CSS

   #results {
   width:94%;
   position:absolute;
   margin: 0 auto;
   left: 0;
   right: 0;
   background-color:white;
   border:1px solid #c0c0c0;
   display:none;
   text-align:left;
   z-index:10000;
   }
   #results .item {
   padding:3px;
   height:50px;
   font-family: arial;
   display:table-cell;
   vertical-align:middle;
   border-bottom:1px solid #c0c0c0;
   }

修改

很抱歉，上面的代码实际上是将所有内容集中在一条线上..一个下拉，其中包含所有建议中的一个下拉列表

Answer 1

只需添加display: block并使用line-height作为水平中心

<强> CSS

#results {
   width:94%;
   position:absolute;
   margin: 0 auto;
   left: 0;
   right: 0;
   background-color:white;
   border:1px solid #c0c0c0;
   text-align:left;
   z-index:10000;
   }
   #results .item {
   padding:3px;
   height:50px;
   font-family: arial;
   display:block;
   vertical-align:bottom;
   border-bottom:1px solid #c0c0c0;
   line-height: 50px;
   }

<强> DEMO HERE

Answer 2

将商品类的line-height:设置为等于div的高度，例如

 #results .item {
 padding:3px;
 height:50px;
 font-family: arial;
 display:table-cell;
 vertical-align:middle;
 line-height:50px;
 border-bottom:1px solid #c0c0c0;
 }

垂直对齐下拉菜单

2 个答案: