เป็นไปได้ไหมที่จะจัดกึ่งกลางข้อความในกล่องที่เลือก?

ฉันลองทำสิ่งนี้: 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-only ในการจัดกึ่งกลางข้อความในกล่องเลือกหรือไม่?

ฉันเกรงว่าสิ่งนี้จะไม่สามารถทำได้ด้วย 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 ลงในคลาสที่เลือก

ใช้ 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;

2563, ฉันใช้:

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

รหัส Codepen ทั้งหมดที่นี่: 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 (ในปี 2560) ยังคงแทนที่ตัวเลือกผ่าน JS และสร้างกล่องตัวเลือกปลอมของคุณเองด้วย divs หรืออะไรก็ตามและผูกเหตุการณ์การคลิกบนเพื่อรองรับข้ามเบราว์เซอร์

ไม่อยู่กึ่งกลาง แต่ใช้ตัวอย่างด้านบนคุณสามารถสร้างระยะขอบซ้ายในกล่องที่เลือก

<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>มากนัก วิธีเดียว (ข้ามเบราว์เซอร์) จะเป็นการสร้างรายการแบบหล่นลงด้วยตนเองด้วย divs และ css / js เพื่อสร้างสิ่งที่คล้ายกัน

หากคุณไม่พบวิธีการแก้ปัญหาใด ๆ คุณสามารถใช้เคล็ดลับนี้กับ angularjs หรือใช้ js เพื่อจับคู่ค่าที่เลือกกับข้อความบน div วิธีการแก้ปัญหานี้สอดคล้องกับ 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 text-align: 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>

จนกว่าคุณจะได้รับผลกระทบของข้อความชิดกลาง