如何使用CSS将选择菜单中的选项居中

Question

I'd like for all the options in a select menu to be centered, however I can't find a way of doing it.

After a quick google I couldn't find any real solutions, however most of the entries are quite old, so I'm wondering if there have been any improvements made to css to make this possible.

The closest I've found is to use text indentation, which may well work for the options that are the same length, but for any options of varying lengths it of course looks off.

Answer 1

You might be interested in using ul and li instead of a traditional select and option .

Bootstrap has a component that lets you do this: Single button dropdowns .

You can use their component and add a style similar to this:

ul.btn-dropdown li {
  text-align: center;
}

You can get a result like this:

Answer 2

HTML/CSS doesn't provide for formatting Option elements within Select lists - only for formatting the whole Select list.

You could try padding with spaces but, realistically, I'd concentrate on more important issues and let Select lists be Select lists.

(JQuery may have something to offer, but I do straight Javascript so am not familiar enough to know).

Tony Duffill