html - HTML 选择不会在 chrome 上居中文本
问题描述
我遇到了选择选项文本未以 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>
解决方案
使用 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;
}
推荐阅读
- r - 无法在 R 中拟合函数
- bash - Cron 只运行部分 bash 脚本
- ruby - 如何将哈希中的许多值相互比较
- javascript - 有没有办法在reducer新添加的对象中解构?
- php - 为什么在最新的 Wordpress 更新中出现未定义的属性 stdClass 错误?
- angular - Angular PWA / Service worker offline translation width ngx-translate
- python - 当我尝试在 Knime python 脚本节点中迭代熊猫数据框时,我收到“TypeError:'DataFrame' object is not callable”
- javascript - Selection on an object in Vue
- python - 从 VBA 运行 Python 脚本,检查“RetVal = Shell”命令是否有效
- python - How to write json data into a column based on the value in another column in CSV file python