How to Make Sure Select Option Text Align in the Center in Ie

Centering text in ` option ` elements (Webkit & IE)

At my knowledges, I suggest you to create your own select-like element instead of trying to center the select button as a workaround. You can do it using javascript (jQuery here, you can still do it using pure javascript, which will be a faster code).

html :

<div class="dropdown">
    <div class="dropdown-title">Dropdown menu</div>

    <div class="dropdown-menu">
        <div class="option">Option 1</div>
        <div class="option">Option 2</div>
    </div>

    <input type="hidden" class="dropdown-select" />
</div>

css :

.dropdown-title {
    padding: 5px;
    border: 1px solid black;
}
.dropdown-menu {
    display: none;
}
.option {
    border: 1px solid grey;
    text-align: center;
    padding: 3px;
}

js :

$('.dropdown-title').on('click', function() {
    $(this).next('.dropdown-menu').toggle();
});
$('.option').on('click', function() {
    $(this).closest('.dropdown-menu').hide();
    $(this).parents('.dropdown').find('.dropdown-title').html($(this).html());
    $(this).parents('.dropdown').find('.dropdown-select').val($(this).html());
});

Using jQuery in this case : http://jsfiddle.net/U44Yr/

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

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.

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

IE Select text align center

There is no way to apply style in item as a select on Internet Explorer.
Sad, but is true.

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>

.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;
}