是否可以将文本置于选择框中？

Question

我试试这个:http://jsfiddle.net/ilyaD/KGcC3/

HTML:

<select name="state" class="ddList">
   <option value="">(please select a state)</option>
   <option class="lt" value="--">none</option>
   <option class="lt" value="AL">Alabama</option>
   <option class="lt" value="AK">Alaska</option>
   <option class="lt" value="AZ">Arizona</option>
   <option class="lt" value="AR">Arkansas</option>
   <option class="lt" value="CA">California</option>
   <option class="lt" value="CO">Colorado</option>
</select>

CSS:

select { width: 400px; text-align:center; }
select .lt { text-align:center; }

你可以看到它不起作用.是否有一种仅限CSS的方式来在选择框中居中文本？

Answer 1

Chrome有部分解决方案:

select { width: 400px; text-align-last:center; }

它确实使所选选项居中,但不是下拉列表中的选项.

Answer 2

这是为了对齐.试试吧:

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

浏览器对text-align-last属性的支持可以在这里找到:https://www.w3schools.com/cssref/css3_pr_text-align-last.asp 看起来只有Safari仍然不支持它.

Answer 3

2020 年，我正在使用：

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

Answer 4

您必须将CSS规则放入select类中.

使用CSS text-indent

例

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

CSS代码

select { text-indent: 5px; }

Answer 5

对的，这是可能的。您可以使用text-align-last

text-align-last: center;

Answer 6

我担心这对于普通的CSS是不可能的,并且不可能完全跨浏览器兼容.

但是,使用jQuery插件,您可以设置下拉列表的样式:

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

此插件隐藏select元素,并动态创建span元素等以显示自定义下拉列表样式.我非常有信心你能够改变跨度上的样式以使项目居中对齐.

Answer 7

只是用这个:

select {

text-align-last: center;
padding-right: 29px;

}

Answer 8

select {
  text-align: center;
  text-align-last: center;
}
option {
  text-align: left;
}

<select>
   <option value="">(please select a state)</option>
   <option class="lt" value="--">none</option>
   <option class="lt" value="AL">Alabama</option>
   <option class="lt" value="AK">Alaska</option>
   <option class="lt" value="AZ">Arizona</option>
   <option class="lt" value="AR">Arkansas</option>
   <option class="lt" value="CA">California</option>
   <option class="lt" value="CO">Colorado</option>
</select>

Answer 9

这个JS函数应该适合你

function getTextWidth(txt) {
  var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
  var elmWidth = $elm.width();
  $elm.remove();
  return elmWidth;
}
function centerSelect($elm) {
    var optionWidth = getTextWidth($elm.children(":selected").html())
    var emptySpace =   $elm.width()- optionWidth;
    $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start 
$('.centerSelect').each(function(){
  centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
  centerSelect($(this));
});

完全Codepen在这里:http://codepen.io/anon/pen/NxyovL

Answer 10

我总是得到以下hack来让它只与css一起工作.

padding-left: 45%;
font-size: 50px;

padding将文本居中,可以调整为文本大小:)

从验证的角度来看,这显然不是100%正确,但我确实这样做:)

Answer 11

如果您有一个列表，其文本长度选项相似（例如，选择页面），则可以使用“假”解决方案：

padding-left: calc(50% - 1em);

这适用于Chrome，Firefox和Edge。这里的技巧是将文本从左侧推到中心，然后将长度的一半减去px，em或任何选项文本。

最佳解决方案IMO（在2017年）仍在通过JS替换选择，并使用divs或其他内容构建您自己的伪选择框，并在其上绑定单击事件以提供跨浏览器支持。

Answer 12

这为我工作：

text-align: center;
text-align-last: center;

Answer 13

尝试这个 ：

select {
    padding-left: 50% !important;
    width: 100%;
}

Answer 14

不完全居中，但是使用上面的示例，您可以在选择框中添加一个左边界。

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>