Gueson Gueson - 1 month ago 5
CSS Question

How to make the value of select element to the center position in the Bootstrap framework

I want to center the value of a

select
element. I'm using Twitter Bootstrap.

Normally, with other elements, we can add a
text-center
class to them. However, it doesn't work when applying that class to the select element. If I add the class to each of the options contained within the select element, it still doesn't work.

Here is a code snippet and an image:

<div class="col-sm-2">
<select class="form-control text-center" ng-model="immunization['D2002.35']">
<option value=""></option>
<option value="Yes" class="text-center">Yes</option>
<option value="No" class="text-center">No</option>
`enter code here`</select>
</div>


enter image description here

Answer

There are no specific Bootstrap classes to do that as far as I know.

But the solution seems pretty simple:

option {
  text-align: left;
}
select {
  text-align-last: center;
  text-align: center;
}

JSFiddle for demo here.

Comments