Align text in label select tags


#1

Hello, i use 3 slect tags with labes , and i want to align to center the text from select options.
but its not working well. here is an example showing below how it is now:

and here is the code from html

<div class="row responsive-lg">
                <label class="item item-input est-select-label">
                    <div class="style-select">
                    <select id="state" ng-disabled="!statessource" ng-model="citiessource" ng-options="state for (state,city) in statessource" ng-change="GetSelectedState()"
                            ng-init="citiessource = countries.USA.STATES">
                    </select>
                    </div>
                </label>
            </div> 

and here is the CSS

 .est-select-label {
  margin: 20px 20px 0 20px;
  background-color: $button-color;
  border-radius: 15px;
  border: none;
  display: inline-block;

}

.est-select-country {
  display: block;
}

.style-select {
  overflow: hidden;
  text-align: center;
}

.style-select select {
  -webkit-appearance: none;
  background-color: $button-color;
  color: #ffffff;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  cursor: pointer;
  @include fade-transition(0.4s);
}

any idea how can i do the text uniform?