Có thể để trung tâm văn bản trong hộp chọn?

Tôi đã thử điều này: 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; }

Như bạn thấy, nó không hoạt động. Có cách nào chỉ CSS để căn giữa văn bản trong hộp chọn không?

Tôi e rằng điều này là không thể với CSS đơn giản và sẽ không thể làm cho trình duyệt hoàn toàn tương thích.

Tuy nhiên, bằng cách sử dụng plugin jQuery, bạn có thể tạo kiểu thả xuống:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-stomme-a-html-select.html

Plugin này ẩn selectphần tử và tạo spancác phần tử, v.v ... để hiển thị kiểu danh sách thả xuống tùy chỉnh. Tôi khá tự tin rằng bạn có thể thay đổi kiểu dáng trên các nhịp vv để căn giữa các mục.

Có một giải pháp cho Chrome :

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

Nó tập trung vào tùy chọn đã chọn, nhưng không phải là các tùy chọn bên trong danh sách thả xuống.

Đó là cho đúng. Thử nó:

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

hỗ trợ trình duyệt cho text-align-lastthuộc tính có thể được tìm thấy ở đây: https://www.w3schools.com/cssref/css3_prigin-align-last.asp Có vẻ như chỉ Safari vẫn không hỗ trợ nó.

Bạn phải đặt quy tắc CSS vào lớp chọn.

Sử dụng văn bản CSS thụt lề

Thí dụ

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

Mã CSS

select { text-indent: 5px; }

Vâng, nó là có thể. Bạn có thể sử dụng văn bản căn chỉnh cuối cùng

text-align-last: center;

2020, tôi đang sử dụng:

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

chỉ sử dụng cái này:

select {

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

}

Hàm JS này sẽ phù hợp với bạn

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 đầy đủ ở đây: http://codepen.io/anon/pen/NxyovL

Tôi đã luôn luôn nhận được các bản hack sau để làm cho nó hoạt động với css mà thôi.

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

phần đệm sẽ căn giữa văn bản và có thể được điều chỉnh cho kích thước văn bản :)

Điều này rõ ràng là không chính xác 100% theo quan điểm xác nhận tôi đoán nhưng nó thực hiện công việc :)

Giải pháp "giả mạo" thay thế nếu bạn có một danh sách với các tùy chọn tương tự về độ dài văn bản (ví dụ chọn trang):

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

Điều này hoạt động trong Chrome, Firefox và Edge. Thủ thuật ở đây là đẩy văn bản từ bên trái sang trung tâm, sau đó trừ một nửa chiều dài bằng px, em hoặc bất kỳ văn bản tùy chọn nào.

Giải pháp tốt nhất IMO (năm 2017) vẫn đang thay thế lựa chọn thông qua JS và xây dựng hộp chọn giả của riêng bạn bằng div hoặc bất cứ điều gì và liên kết các sự kiện nhấp chuột trên đó để hỗ trợ nhiều trình duyệt.

Không hoàn toàn Định tâm nhưng sử dụng ví dụ ở trên, bạn có thể tạo lề trái trong hộp chọn.

<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>

điều này làm việc cho tôi:

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

thử cái này :

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

Bạn không thể thực sự tùy chỉnh <select>hoặc <option>nhiều. Cách duy nhất (trình duyệt chéo) sẽ là tự tạo một trình đơn thả xuống với div và css / js để tạo một cái gì đó tương tự.

Nếu bạn không tìm thấy bất kỳ giải pháp nào, bạn có thể sử dụng thủ thuật này trên angularjs hoặc sử dụng js để ánh xạ giá trị đã chọn với một văn bản trên div, giải pháp này hoàn toàn tuân thủ css trên góc nhưng cần ánh xạ giữa select và div:

var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = '';


  }
]);

.ghostSelect {
  opacity: 0.1;
  /* Should be 0 to avoid the select visibility but not visibility:hidden*/
  display: block;
  width: 200px;
  position: absolute;
}
.select {
  border: 1px solid black;
  height: 20px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
  display: block;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-app ng-controller="selectCtrl">
    <div class=select>
      <select ng-model="value" class="ghostSelect">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
      <div>{{value}}
      </div>
    </div>
  </div>
</body>

Hy vọng điều này có thể hữu ích cho ai đó vì tôi phải mất một ngày để tìm giải pháp này trên phonegap.

Mặc dù bạn không thể căn giữa văn bản tùy chọn trong một lựa chọn, bạn có thể đặt một div được định vị tuyệt đối trên đầu của lựa chọn cho cùng một hiệu ứng:

#centered
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 818px;
  height: 37px;
  text-align: center;
  font: bold 24pt calibri;
  background-color: white;
  z-index: 100;
}

#selectToCenter
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 840px;
  height: 40px;
  font: bold 24pt calibri;
}

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

<select id="selectToCenter"></select>
<div id="centered"></div>

Đảm bảo cả div và select đều có vị trí cố định trong tài liệu.

Chưa có 100%, nhưng bạn có thể sử dụng đoạn trích này!

text-align-last: centre; // Đối với Chrome text-align: centre; // Dành cho Firefox

Hiện tại không hoạt động trên Safari hoặc Edge!

nếu các tùy chọn là tĩnh, bạn có thể lắng nghe sự kiện thay đổi trên hộp chọn của mình và thêm phần đệm cho từng mục riêng lẻ

$('#id').change(function() {
    var select = $('#id');
    var val = $(this).val();

    switch(val) {
        case 'ValOne':
            select.css('padding-left', '30px');
            break;
        case 'ValTwoLonger':
            select.css('padding-left', '20px');
             break;
        default:
            return;
    }
});

thêm & nbsp như thế này ...

    <option value="0"> &nbsp&nbsp&nbsp&nbsp&nbsp--Select Name--</option>

cho đến khi bạn nhận được một hiệu ứng của văn bản liên kết trung tâm