title: Vertical Align On Drop Down Menu
body: <p>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.</p>
  
  <p>My drop down menu is #results.</p>
  
  <p>The code and CSS is as below.</p>
  
  <pre><code> &lt;div class="container"&gt;
    &lt;div id="jumbo" class="jumbotron"&gt;
     &lt;input type="text" value="" placeholder="Search" id="keyword"&gt;
     &lt;input type="button" id="myBtn" value="Go"&gt;
     &lt;div id="results"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="row"&gt;
      &lt;div class="col-md-12" id="trainstation" style="background-color:blue;width:100%;margin:auto;height:100px;"&gt;
      &lt;/div&gt;
      &lt;div class="clearfix visible-lg"&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;  
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>   #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;
     }  
  </code></pre>
  
  <p>EDIT</p>
  
  <p>Sorry the code above is actually centering everything on ONE line..ie ONE drop down with all the suggestions in that one drop down</p>