Можно ли центрировать текст в поле выбора?

Ответ 1

Боюсь, что это невозможно с простым CSS, и не будет возможности сделать полностью совместимым с браузерами.

Однако, используя плагин jQuery, вы можете стилизовать выпадающий список:

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

Этот плагин скрывает элемент select и создает элементы span т.д. Для отображения собственного стиля выпадающего списка. Я совершенно уверен, что вы сможете изменить стили на пролетах и т.д., Чтобы выровнять по центру элементы.

Ответ 2

Существует частичное решение для Chrome:

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

Он центрирует выбранный параметр, но не параметры внутри раскрывающегося списка.

Ответ 3

Что за выравнивание справа. Попытайся:

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 все еще не поддерживает его.

Ответ 4

Вы должны поместить правило CSS в класс select.

Использовать текстовый отступ CSS

Пример

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

CSS-код

select { text-indent: 5px; }

Ответ 5

просто используя это:

select {

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

}

Ответ 6

Эта функция 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));
});

Full Codepen здесь: http://codepen.io/anon/pen/NxyovL

Ответ 7

select {
  text-align: center;
  text-align-last: center;
}
option {
  text-align: left;
}

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

Ответ 8

Я всегда убирался со следующим хаком, чтобы заставить его работать только с css.

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

padding будет центрировать текст и может быть изменен для размера текста:)

Это, очевидно, не на 100% правильно с точки зрения проверки, я думаю, но он выполняет задание:)

Ответ 9

Альтернативное "поддельное" решение, если у вас есть список с опциями, аналогичными по длине текста (например, выберите страницу):

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

Это работает в Chrome, Firefox и Edge. Хитрость здесь в том, чтобы переместить текст слева в центр, а затем вычесть половину длины в px, em или что-либо из текста опции.

Лучшее решение IMO (в 2017 году) по-прежнему заменяет select с помощью JS и создает свой собственный фальшивый флажок выбора с помощью div или чего-либо еще и связывает события клика на нем для поддержки кросс-браузерной работы.

Ответ 10

это сработало для меня:

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

Ответ 11

Не совсем центрируя, но используя пример выше, вы можете сделать левое поле в поле выбора.

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

Ответ 12

попробуй это:

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

Ответ 13

Да, это возможно. Вы можете использовать text-align-last

text-align-last: center;

Ответ 14

Вы не можете сильно настроить <select> или <option>. Единственный способ (кросс-браузер) - вручную создать раскрывающийся список с divs и css/js для создания чего-то подобного.

Ответ 15

Если вы не нашли решения, вы можете использовать этот трюк на angularjs или использовать js для сопоставления выбранного значения с текстом в div, это решение является полным css-совместимым на angular, но для этого требуется сопоставление между select и ДИВ:

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>

Ответ 16

Пока вы не можете центрировать текст опции в пределах выбора, вы можете установить абсолютно позиционированный 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 имеют фиксированные позиции в документе.

Ответ 17

добавить вот так...

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

пока вы не получите эффект выравнивания текста по центру

Ответ 18

Если параметры статичны, вы можете прослушивать событие изменения в своем поле выбора и добавлять отступы для каждого отдельного элемента

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

Ответ 19

Это может быть полезно для очень конкретных случаев использования. Это утомительный и уродливый, но работающий кросс-браузер: просто используйте жестко закодированные пробелы, чтобы каждая запись имела такую ​​же длину.

<select class="form-control" id="sel1">
    <option>-10</option>
    <option>&nbsp;-9</option>
    <option>&nbsp;-8</option>
    <option>&nbsp;-7</option>
    <option>&nbsp;-6</option>
    <option>&nbsp;-5</option>
    <option>&nbsp;-4</option>
    <option>&nbsp;-3</option>
    <option>&nbsp;-2</option>
    <option>&nbsp;-1</option>
    <option>&nbsp;&nbsp;0</option>
    <option>&nbsp;&nbsp;1</option>
    <option>&nbsp;&nbsp;2</option>
    <option>&nbsp;&nbsp;3</option>
    <option>&nbsp;&nbsp;4</option>
    <option>&nbsp;&nbsp;5</option>
    <option>&nbsp;&nbsp;6</option>
    <option>&nbsp;&nbsp;7</option>
    <option>&nbsp;&nbsp;8</option>
    <option>&nbsp;&nbsp;9</option>
    <option>&nbsp;10</option>
</select>

Ответ 20

Вы можете добавить этот стиль в тег раскрывающегося списка (text-align: center), как показано ниже:

<asp:DropDownList ID="DDL" runat="server" CssClass="form-control btn-default" Style="font-size: 1.25vw; font-weight: bolder; font-family: Sakkal Majalla; text-align: center; text-align-last:center; color: #1658a4; height: 2.5vw; width: 18vw" TabIndex="2" AutoPostBack="true">