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

【问题标题】：HTML select will not center text on chromeHTML 选择不会在 chrome 上居中文本
【发布时间】：2020-11-25 15:45:48
【问题描述】：

我遇到了选择选项文本未以 chrome 为中心的问题。在 firefox 上使用 text-align: center on select 可以工作，但它不适用于 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>

【问题讨论】：

最新的chrome版本已经产生了很多这样的问题。许多属性在 chrome 上不起作用，而它们在其他浏览器上起作用。也许，这也是同样的情况。我想我们需要等待他们解决这些问题。
希望有一个解决方案/黑客，如果不是生病就等着看它是否解决

标签： html css

【解决方案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;
}

【讨论】：

解决了！谢谢