Center aligning text in a select menu

Question

I have a ddl in my menu and wish to center the text. Because the ddl selected values are different lengths, they go off center. Any help appreciated.

I've tried text-indent as in the example below.

select {
  font-weight: bold;
  color:#fff;
  background:#444444;
  border:0;
  text-indent: 20%;
  font-size:18px;
  height:29px;
}

<select>
  <option value="0">Mixed Job Lot</option>
  <option value="1">Antiques / Art</option>
  <option value="2">Baby &amp; Toddler Stuff</option>
</select>

Not really an asp.net question. You could create this as normal html/css in a [snippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) to demonstrate exactly what you mean — freefaller, Jun 07 '19 at 09:27

score 2 · Accepted Answer · answered Jun 07 '19 at 09:37

2

Simply add text-align-last:center; to your select option

select {
  font-weight: bold;
  color:#fff;
  background:#444444;
  border:0;
  font-size:18px;
  height:29px;
  text-align-last:center;
}

<select>
  <option value="0">Mixed Job Lot</option>
  <option value="1">Antiques / Art</option>
  <option value="2">Baby &amp; Toddler Stuff</option>
</select>

answered Jun 07 '19 at 09:37

Nisharg Shah

16,638
10
62
73

beware this won’t work in Safari and iOS – Simone Jun 07 '19 at 09:41
yes, i know that, for more info go to https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last link – Nisharg Shah Jun 07 '19 at 09:42
Doesn't seem to work in Chrome latest on Win10 either: https://i.stack.imgur.com/Lx2m9.png – MTCoster Jun 07 '19 at 09:52
bro we are talking about select not option – Nisharg Shah Jun 07 '19 at 09:53

Center aligning text in a select menu

1 Answers1