Is it possible to center text in select box?


I tried this:


<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>


select { width: 400px; text-align: center; }
select .lt { text-align: center; }

As you can see, it doesn’t work. Is there a CSS-only way to center text in the 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:

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.

Answered By – Curtis

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.