선택 상자에서 텍스트를 가운데에 배치 할 수 있습니까?

나는 이것을 시도했다 : 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 전용 방법이 있습니까?

일반 CSS로는 이것이 불가능하고 브라우저 간 완벽하게 호환되도록 할 수 없습니다.

그러나 jQuery 플러그인을 사용하면 드롭 다운의 스타일을 지정할 수 있습니다.

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

이 플러그인은 select요소를 숨기고 span사용자 정의 드롭 다운 목록 스타일을 표시하기 위해 요소 등을 즉석에서 만듭니다 . 스팬 등의 스타일을 변경하여 항목을 중앙 정렬 할 수 있다고 확신합니다.

Chrome 에는 부분적인 해결책이 있습니다 .

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

선택한 옵션의 가운데에 있지만 드롭 다운 내의 옵션에는 없습니다.

맞습니다. 시도 해봐:

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 만 지원하지 않는 것 같습니다.

CSS 규칙을 select 클래스에 넣어야합니다.

CSS 텍스트 들여 쓰기 사용

예

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

CSS 코드

select { text-indent: 5px; }

네 가능합니다. 마지막 텍스트 정렬을 사용할 수 있습니다

text-align-last: center;

2020 년, 나는 다음을 사용하고있다 :

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

그냥 이것을 사용하십시오 :

select {

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

}

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

전체 코드 펜 : http://codepen.io/anon/pen/NxyovL

나는 항상 CSS로 작동하도록 다음과 같은 핵을 얻었습니다.

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

패딩은 텍스트를 중앙에 위치시키고 텍스트 크기에 맞게 조정할 수 있습니다 :)

이것은 내가 생각하는 검증 관점에서 분명히 100 % 정확하지는 않지만 일을합니다 :)

텍스트 길이와 비슷한 옵션을 가진 목록이있는 경우 대체 "가짜"솔루션 (예 : 페이지 선택) :

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

이것은 Chrome, Firefox 및 Edge에서 작동합니다. 트릭은 텍스트를 왼쪽에서 가운데로 밀고 길이의 절반을 px, em 또는 옵션 텍스트 중 하나에서 빼는 것입니다.

최고의 솔루션 IMO (2017 년)는 여전히 JS를 통해 선택을 대체하고 div 또는 기타로 자신의 가짜 선택 상자를 작성하고 크로스 브라우저 지원을 위해 클릭 이벤트를 바인딩합니다.

중심이 아니지만 위의 예제를 사용하면 선택 상자에서 왼쪽 여백을 만들 수 있습니다.

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

이것은 나를 위해 일했다 :

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

이 시도 :

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

실제로 사용자 정의 <select>하거나 <option>많이 할 수는 없습니다 . 유일한 방법 (크로스 브라우저)은 div와 css / js로 드롭 다운을 수동으로 생성하여 비슷한 것을 생성하는 것입니다.

해결책을 찾지 못하면 angularjs 에서이 트릭을 사용하거나 js를 사용하여 선택한 값을 div의 텍스트와 매핑 할 수 있습니다.이 솔루션은 angular에서 전체 CSS를 준수하지만 select와 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>

phonegap 에서이 솔루션을 찾는 데 하루가 걸렸으므로 누군가에게 유용 할 수 있기를 바랍니다.

선택 텍스트 내에서 옵션 텍스트를 가운데에 배치 할 수는 없지만 선택의 상단에 동일한 효과로 절대 위치 div를 배치 할 수 있습니다.

#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와 select 모두 문서에서 고정 위치를 가지고 있는지 확인하십시오.

아직 100 %는 아니지만이 스 니펫을 사용할 수 있습니다!

텍스트-마지막-마지막 : 중심; // Chrome 텍스트 정렬 : center; // Firefox의 경우

현재 Safari 또는 Edge에서는 작동하지 않습니다!

옵션이 정적 인 경우 선택 상자에서 변경 이벤트를 수신하고 각 개별 항목에 패딩을 추가 할 수 있습니다

$('#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를 추가하세요.

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

중심 정렬 텍스트의 효과를 얻을 때까지