How to Centre Text in a Select Element (and the Safari Catch)

This article covers how to centre the text inside a <select> element.

The short answer: you do not need jQuery. One line of CSS, text-align: center, does it — but that line has no effect in Safari.

Select elements are drawn by the browser and the operating system, so CSS only reaches part of them. This article covers the plain CSS version and the approach that works everywhere, Safari included.

Centring it with CSS alone

Apply text-align: center to the select. No JavaScript, no library.

<select id="centered-select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

#centered-select {
  text-align: center;
}

That centres the selected text shown while the dropdown is closed.

This article originally presented the same thing as a jQuery technique, but all it did was apply text-align from JavaScript.

// identical in effect to the CSS above
$(document).ready(function() {
  $('#centered-select').css('text-align', 'center');
});

Because the style is applied after the script loads, the element can briefly render left-aligned and then shift. If all you are doing is applying a style, put it in the stylesheet.

It does not work in Safari

text-align on a <select> has no effect in Safari, on either macOS or iOS. The text stays left-aligned.

A select is a native control drawn by the browser and the OS, so how far CSS reaches into it varies between engines.

▼How text-align behaves

Treat the open option list as something you cannot style at all. That list is rendered by the operating system rather than the browser. The only part you can reliably centre is the text visible while the select is closed.

Adding text-align-last extends the effect in some engines, but it does not change Safari’s behaviour:

#centered-select {
  text-align: center;
  text-align-last: center;
}

Centring it reliably, Safari included

Turn off the native appearance with appearance: none and style the control yourself. CSS then applies as it would to any other element.

Once the browser stops drawing the control, you supply the arrow yourself.

.select-wrap {
  position: relative;
  display: inline-block;
}

.select-wrap select {
  /* stop the browser drawing its own control */
  appearance: none;
  -webkit-appearance: none;

  text-align: center;
  /* equal padding on both sides so the centre does not shift */
  padding: 8px 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font: inherit;
}

/* draw the arrow */
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

<div class="select-wrap">
  <select id="centered-select">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</div>

Keep the left and right padding equal. It is tempting to add padding only on the right to make room for the arrow, but that shifts the text’s centre to the left. Pad both sides equally and position the arrow on top.

pointer-events: none is required as well. Without it the arrow pseudo-element swallows clicks, and clicking that part of the control does nothing.

Whether to centre it at all

Form fields are usually easier to scan when left-aligned. Decide based on what the select sits next to.

Centring one select while the text inputs beside it stay left-aligned breaks the vertical line down the left edge of the form. The result often looks less tidy rather than more.

Centring works when:

In a stacked form, leaving everything left-aligned keeps the eye moving down a single edge.

For form styling in general, making the whole li clickable instead of just the text is worth a look — Bootstrap and Tailwind both ship consistent select styling out of the box.