HTML 选择不会在 chrome 上居中文本

Question

我遇到了一个问题，即选择选项文本不以 chrome 为中心。在 firefox 上使用 text-align: center 选择作品，但它不适用于 chrome。我没有在 safari 上测试过。我曾尝试在选择选项上使用文本对齐中心，但这也没有提供任何修复。

.grid1 {
  grid-area: 1 / 1 / 2 / 2;
}

.side-bar {
  display: flex;
  justify-content: center;
  background-color: #fafafa;
  height: 100vh;
  border-right: solid #eeeeee 1px;
  color: #333;
}

.side-bar h3 {
  padding: 1rem 0rem;
}

.select {
  height: auto;
  width: 80%;
  margin: 1rem;
  overflow: hidden;
}

select {
  color: #333;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  width: 10rem;
  text-align: center;
}

select option {
  text-align: center;
}

<section class="side-bar grid1">
  <div class="select">
    <h3>Filter</h3>
    <select name="todos" class="filter-todo">
      <option value="all">All</option>
      <option value="completed">Completed</option>
      <option value="uncompleted">Uncompleted</option>
    </select>
    <h3>Saved Lists</h3>
    <form class="new-list-form">
      <button class="new-list-button form-button" type="submit">
              <i class="las la-plus-square"></i>
            </button>
      <input type="text" class="list-input" placeholder="Add list name" />
    </form>
    <select id="task-lists" name="lists" class="task-lists">
      <option>Select a list</option>
    </select>
    <button class="delete-button form-button">Delete List</button>
  </div>
</section>

Answer 1

使用 text-align-last 解决了这个问题。

.grid1 {
  grid-area: 1 / 1 / 2 / 2;
}

.side-bar {
  display: flex;
  justify-content: center;
  background-color: #fafafa;
  height: 100vh;
  border-right: solid #eeeeee 1px;
  color: #333;
}

.side-bar h3 {
  padding: 1rem 0rem;
}

.select {
  height: auto;
  width: 80%;
  margin: 1rem;
  overflow: hidden;
}
select {
  color: #333;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  width: 10rem;
  text-align: center;
  text-align-last: center;
}

select option {
  text-align: center;
}