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?