在选择菜单中居中对齐文本[重复]

Question

我的菜单中有一个 ddl，并希望将文本居中。因为 ddl 选择的值是不同的长度，所以它们偏离中心。任何帮助表示赞赏。

我已经尝试了文本缩进，如下例所示。

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>

Answer 1

只需将text-align-last:center; 添加到您的选择选项中

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>