0

I have a select element in my HTML form and by default, the text is aligned left. text-align: center; does not center it like a text input.

From other answers on Stack Overflow, some users say to use the text-indent property but though it moves the text, it isn't good for aligning different lengths of text.

Though a CSS would be best, a javascript/jQuery solution would be okay.

So finally, how do I go about centering the text in a form select element?

HTML Code:

<select name="country">
    <option value="Afganistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
</select>
Pav Sidhu
  • 6,724
  • 18
  • 55
  • 110

1 Answers1

-2

HTML:

<select name="country">
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>

CSS:

   select {

    height: 37px;
    padding: 0 20px 0 20px;
}

jsfiddle

if you do not want to pad the eliment you could always use a Javascript-based extension which typically uses <div> elements instead of an actual <select> element and allows you to easily style it.

https://formstone.it/components/dropdown/#options

pool pro
  • 2,084
  • 12
  • 21
  • Won't this just indent things like `text-indent`? – crush Jul 28 '15 at 20:47
  • Still not centered - just indented with padding on both sides. – crush Jul 28 '15 at 20:51
  • text-align applies to block level elements only. But even if you assign display: block to the select and option elements, the texts probably won't be centered. The reason is that browsers use their built-in routines for rendering form fields, and these routines are affected by CSS rules to a limited extent only.you have to use an indent of some kind. you can change it to align right with – pool pro Jul 28 '15 at 21:25