How to Center Text in Select Box

Is it possible to center text in select box?

I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.

However, using a jQuery plugin, you could style the dropdown:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.

text-align: center placeholder text in select

Is this what you are trying to do ?

select {  text-align: center;  text-align-last: center;  /* webkit*/}option {  text-align: left;  /* reset to left*/}

<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">  <option value="ADULTS*">ADULTS*</option>  <option value="1">1</option>  <option value="2">2</option>  <option value="3">3</option>  <option value="4">4</option>  <option value="5">5</option>  <option value="6">6</option>  <option value="7">7</option>  <option value="8">8</option></select><select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">  <option value="ADULTS*">ADULTS*</option>  <option value="1" selected="true">1</option>  <option value="2">2</option>  <option value="3">3</option>  <option value="4">4</option>  <option value="5">5</option>  <option value="6">6</option>  <option value="7">7</option>  <option value="8">8</option></select>

Horizontally text center for select option

Solution 1: (A simple solution)

select {
   ...    
   padding: 0 0 0 20px;
}

DEMO 1

Solution 2: (added 27-10-2017)

Only the selected number will be centered.

* Probably not yet supported by Safari

select {
   ...
   text-align: center;
   text-align-last: center;
}

DEMO 2

How to fix the center select text in a box?

Just remove the padding and set the line-height equal to it's height. Your welcome :)

.select-style6 select {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 12px;
    line-height:33px;
}

Edit:
Hi I just tested it in IE but unfortunately we cannot change the alignment of select in IE. As expected IE never fails us!

How to center text of select box in IE10

You could try adding padding-left on the select element.

This doesn't produce exactly the same result as text-align:center, but maybe it's close enough for you.

FIDDLE