Vertical Align On Drop Down Menu - html

Question

I am trying to vertically align my text in a drop down menu. I have been following the suggestion in Stackoverflow and used display: table-cell and vertical-align: middle but it does not appear to work. It just sticks each text at the top of each drop down cell.
My drop down menu is #results.
The code and CSS is as below.
<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;
}
EDIT
Sorry the code above is actually centering everything on ONE line..ie ONE drop down with all the suggestions in that one drop down

Answer 1

Just add display: block and use line-height for horizontal center
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

Set the line-height: of your item class to be equal to the height of the div, so something like
#results .item {
padding:3px;
height:50px;
font-family: arial;
display:table-cell;
vertical-align:middle;
line-height:50px;
border-bottom:1px solid #c0c0c0;
}