title: Center align text in select drop down for all browsers
body: <p>How do I Center align text in select drop down for all browsers? Its center aligned in Firefox, but it comes to left in Chrome and Safari. </p>
  
  <p>CSS:</p>
  
  <pre><code>.challenge{
    max-width: 850px;
    width: 98%;
    height: 50px;
    background: #ffffff;
    margin: 30px auto;
  }
  
  .challenge select {
    width: 100%;
    height: auto;
    background: url(images/select_arrow.png) no-repeat right top #ffffff;
    font-family: 'RexBold';
    text-align: center!important;
    text-align: -moz-center;
    text-align: -webkit-center;
    font-size: 30px;
    padding-top: 7px;
    color: #545454;
    overflow: hidden;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
  }
  </code></pre>