Apakah mungkin untuk memusatkan teks dalam kotak pilih?

Saya mencoba ini: 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; }

Seperti yang Anda lihat, itu tidak berhasil. Apakah ada cara khusus CSS untuk memusatkan teks di kotak-pilih?

Saya khawatir ini tidak mungkin dengan CSS biasa, dan tidak akan mungkin untuk membuat browser yang sepenuhnya kompatibel.

Namun, menggunakan plugin jQuery, Anda bisa menata dropdown:

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

Plugin ini menyembunyikan selectelemen, dan membuat spanelemen dll dengan cepat untuk menampilkan gaya daftar drop down kustom. Saya cukup yakin Anda akan dapat mengubah gaya pada bentang dll untuk memusatkan item.

Ada solusi parsial untuk Chrome :

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

Itu memusatkan opsi yang dipilih, tetapi bukan opsi di dalam dropdown.

Itu untuk menyelaraskan ke kanan. Cobalah:

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

dukungan browser untuk text-align-lastatribut dapat ditemukan di sini: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp Sepertinya hanya Safari yang masih tidak mendukungnya.

Anda harus memasukkan aturan CSS ke dalam kelas pilih.

Gunakan indentasi teks CSS

Contoh

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

Kode CSS

select { text-indent: 5px; }

Ya itu mungkin. Anda dapat menggunakan text-align-last

text-align-last: center;

2020, saya menggunakan:

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

hanya menggunakan ini:

select {

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

}

Fungsi JS ini seharusnya bekerja untuk Anda

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 lengkap di sini: http://codepen.io/anon/pen/NxyovL

Saya selalu lolos dengan hack berikut untuk membuatnya bekerja dengan css saja.

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

padding akan memusatkan teks dan dapat di-tweak untuk ukuran teks :)

Ini jelas tidak 100% benar dari sudut pandang validasi, saya rasa tetapi ia bekerja dengan baik :)

Solusi "palsu" alternatif jika Anda memiliki daftar dengan opsi yang mirip dengan panjang teks (pilih halaman misalnya):

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

Ini berfungsi di Chrome, Firefox dan Edge. Triknya adalah di sini untuk mendorong teks dari kiri ke tengah, lalu kurangi setengah panjangnya dalam px, em atau apa pun dari teks opsi.

Solusi terbaik IMO (pada 2017) masih mengganti yang terpilih melalui JS dan membangun kotak pilih palsu Anda sendiri dengan divs atau apa pun dan mengikat acara klik di atasnya untuk dukungan lintas-browser.

Tidak cukup Pemusatan tetapi menggunakan contoh di atas Anda dapat membuat margin kiri di kotak pilih.

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

ini bekerja untuk saya:

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

coba ini :

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

Anda tidak dapat benar-benar menyesuaikan <select>atau <option>banyak. Satu-satunya cara (cross-browser) adalah secara manual membuat drop down dengan divs dan css / js untuk membuat sesuatu yang serupa.

Jika Anda tidak menemukan solusi apa pun, Anda dapat menggunakan trik ini pada angularjs atau menggunakan js untuk memetakan nilai yang dipilih dengan teks pada div, solusi ini sesuai dengan css pada angular tetapi membutuhkan pemetaan antara select dan 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>

Semoga ini bisa bermanfaat bagi seseorang karena saya butuh satu hari untuk menemukan solusi ini di phonegap.

Meskipun Anda tidak dapat memusatkan teks opsi di dalam pilihan, Anda dapat meletakkan div yang benar-benar diposisikan di atas pilihan untuk efek yang sama:

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

Pastikan kedua div dan pilih memiliki posisi tetap dalam dokumen.

Ini belum 100%, tetapi Anda dapat menggunakan potongan ini!

text-align-last: center; // Untuk penyelarasan teks Chrome: center; // Untuk Firefox

Tidak berfungsi di Safari atau Edge, untuk saat ini!

jika opsinya statis, Anda dapat mendengarkan acara perubahan pada kotak pilih Anda dan menambahkan padding untuk setiap item individual

$('#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;
    }
});

tambahkan & nbsp seperti ini ...

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

sampai Anda mendapatkan efek teks rata tengah