title: Styling drop down center the options for select tag in chrome and firefox
body: <p>I have a drop down list which I styled but I still can't get  why does the text always align differently in chrome and in firefox. I tried adding <code>text-align:center;</code> on my css and the firefox make the selection list centered but is not centered vertically while in chrome it doesn't centered it all but at least it's verticall alignment is centered. Here's the output of it currently (text-align center part removed):</p>
  
  <p>Firefox rendering: 
  <img src="https://i.stack.imgur.com/Ok3T4.png" alt="enter image description here"></p>
  
  <p>Chrome rendering: 
  <img src="https://i.stack.imgur.com/mVsNI.png" alt="for chrome"></p>
  
  <p>this is my css code so far:</p>
  
  <p>div container for the dropdown:</p>
  
  <pre><code>.container {
   background-color:#424141;
   border:1px solid #424141;
   width:280px;
    height:40px;
    font-size:13pt;
    font-weight:bold;
    padding-right: -20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  }
  </code></pre>
  
  <p>and for the drop down:</p>
  
  <pre><code>.dropdown  {
   background-color:#424141;
    border:1px solid #424141;
    position:absolute;
    color: #000000;
    width:280px;
    height:40px;
    font-size:13pt;
    font-weight:bold;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  }
  </code></pre>
  
  <p>and here's the result after adding <code>text-align:center;</code> on the dropdown class:</p>
  
  <p><img src="https://i.stack.imgur.com/vSWJb.png" alt="result 2"></p>
  
  <p>in chrome it remains the same as above.</p>
  
  <p>Here's the html code for this. well it's inside a table I think I can just skip the other part:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;&lt;p class="titles"&gt;City&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div class="container"&gt;&lt;select name="city" tabindex="16" class="dropdown"&gt;
          &lt;?php foreach ($cities as $city1): ?&gt;
  
              &lt;option &lt;?php echo "value='".$city1['city']."'"; if($city1['city']==$city){echo "selected='selected'";} ?&gt;&gt;
          &lt;?php echo $city1['city']; ?&gt;
              &lt;/option&gt;
  
          &lt;?php endforeach ?&gt;
          &lt;/select&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>