MG

Center align text in a select dropdown

There has been a few projects I’ve done where the design has outlined that select boxes should have their text center aligned and until very recently I didn’t know how to do it without throwing a bucket load of javascript at it with something like select2.

In most cases, select dropdown fields are few and far between so adding so much code in to the mix for them seemed daft.

But then I found this little gem…

select {
    text-align-last:center;
}

Here it is in action:

See the Pen CENTER ALIGN TEXT IN A SELECT DROPDOWN by Mike Garlick (@mikode83) on CodePen.

Back to blog

Leave a Reply

Your email address will not be published. Required fields are marked *