Metni seçim kutusunda ortalamak mümkün mü?

Bunu denedim: 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; }

Gördüğünüz gibi çalışmıyor. Metni seçme kutusunda ortalamanın yalnızca bir CSS yolu var mı?

Korkarım bu düz CSS ile mümkün değildir ve tamamen çapraz tarayıcı uyumlu hale getirmek mümkün olmayacaktır.

Ancak, bir jQuery eklentisi kullanarak açılır menüyü biçimlendirebilirsiniz:

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

Bu eklenti selectöğeyi gizler ve spanözel bir açılır liste stili görüntülemek için anında öğeler vb. Oluşturur. Öğeleri ortalamak için açıklıklar vb. Stilleri değiştirebileceğinizden oldukça eminim.

Chrome için kısmi bir çözüm var :

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

Seçilen seçeneği ortalar, ancak açılır menüdeki seçenekleri ortalamaz.

Bu hizalama için. Dene:

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

text-align-lastözellik için tarayıcı desteği burada bulunabilir: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp Görünüşe göre yalnızca Safari hala desteklemiyor.

CSS kuralını select sınıfına koymanız gerekir.

CSS metin girintisini kullan

Misal

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

CSS kodu

select { text-indent: 5px; }

Evet mümkün. Sen kullanabilirsiniz metni-align-son

text-align-last: center;

2020, kullanıyorum:

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

sadece bunu kullanarak:

select {

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

}

Bu JS işlevi sizin için çalışmalıdır

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));
});

Tam Codepen burada: http://codepen.io/anon/pen/NxyovL

Her zaman sadece css ile çalışmak için aşağıdaki kesmek ile aldık.

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

dolgu metni ortalayacak ve metin boyutu için değiştirilebilir :)

Bu tabii ki doğrulama açısından% 100 doğru değil sanırım ama iş yapıyor :)

Metin uzunluğunda benzer seçeneklere sahip bir listeniz varsa alternatif "sahte" çözüm (örneğin sayfa seçimi):

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

Bu Chrome, Firefox ve Edge'de çalışır. Hile, metni soldan ortaya doğru itmek için, ardından uzunluğun yarısını px, em veya seçenek metninin herhangi birinden soyutlamak için burada.

En iyi çözüm IMO (2017'de) yine de JS ile seçimi değiştiriyor ve çapraz seçim desteği için div veya başka bir şeyle kendi sahte seçim kutunuzu oluşturuyor ve tıklama olaylarını bağlıyor.

Tam Merkezleme değil, yukarıdaki örneği kullanarak seçim kutusunda sol kenar boşluğu yapabilirsiniz.

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

bu benim için çalıştı:

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

bunu dene :

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

Gerçekten özelleştiremez <select>veya <option>çok fazla. Tek yol (çapraz tarayıcı), benzer bir şey oluşturmak için div ve css / js ile manuel olarak bir açılır menü oluşturmaktır.

Herhangi bir çözüm bulamadıysanız, bu hileyi angularjs'de veya js kullanarak div üzerinde bir metinle eşleştirmek için kullanabilirsiniz, bu çözüm açısal olarak tam css uyumludur, ancak select ve div arasında bir eşlemeye ihtiyacınız vardır:

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>

Umarım bu telefon için bu çözümü bulmak bir gün sürdü biri için yararlı olabilir.

Seçenek metnini bir seçim içinde ortalayamasanız da, seçimin üstüne kesinlikle yerleştirilmiş bir div'ı aynı efekte yerleştirebilirsiniz:

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

Div ve select öğelerinin belgede sabit konumlara sahip olduğundan emin olun.

Henüz% 100 değil, ama bu pasajı kullanabilirsiniz!

text-align-last: merkez; // Chrome metin hizalaması için: merkez; // Firefox için

Şimdilik Safari veya Edge'de çalışmıyor!

seçenekler statikse, seçim kutunuzdaki değişiklik olayını dinleyebilir ve her bir öğe için dolgu ekleyebilirsiniz

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

& nbsp bunu ekle ...

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

Ortaya hizalanmış metnin efektini elde edene kadar