Я хочу выравнивать по вертикали текст в поле выбора

Ответ 1

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

padding-top:4px;

Размер отступов, который вам нужен, будет зависеть от размера шрифта.

Совет. Если ваш шрифт установлен в px, установите дополнение в px. Если ваш шрифт установлен в em, установите дополнение в em тоже.

ИЗМЕНИТЬ

Это параметры, которые, как я думаю, у вас есть, поскольку выравнивание по вертикали не согласовано между браузерами.

а. Удалите атрибут высоты и разрешите браузеру обрабатывать его. Это обычно работает лучше всего для меня.

 <style>
    select{
        border: 1px solid #ABADB3;
        margin: 0;
        padding: auto 0;
        font-size:14px;
    }
    </style>
    <select>
        <option>option 1</option>
        <option>number 2</option>
    </select>

В. Добавьте верхнюю прописку, чтобы нажимать текст. (В некоторых браузерах нажата стрелка вниз)

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 4px 0 0 0;
    font-size:14px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

С. Вы можете сделать шрифт более крупным, чтобы попытаться подобрать высоту выбора немного лучше.

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0 0 0 0;
    font-size:17px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

Ответ 2

Я наткнулся на этот набор свойств css, которые, похоже, вертикально выравнивают текст в размерах элементов выбора в Firefox:

select
{
    box-sizing: content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
}

Однако, если что-то еще больше помещает текст в IE8. Если я установил свойство box-sizing обратно в border-box, это, по крайней мере, не сделает IE8 хуже (и FF все еще применяет свойство -moz-box-sizing). Было бы неплохо найти решение для IE, но я не задерживаю дыхание.

Изменить: Nix this. После тестирования он не работает. Тем не менее, для всех, кто интересуется, проблема связана со встроенными стилями в файле FF forms.css, влияющим на элементы ввода и выбора. Это свойство line-height: normal! Important. Его нельзя переопределить. Я пробовал. Я обнаружил, что если я удалю встроенное свойство в Firebug, я получаю элемент select с достаточно вертикально-центрированным текстом.

Ответ 3

Мое решение состоит в том, чтобы добавить padding-top для выбора целевого для firefox только этого

// firefox vertical aligment of text
@-moz-document url-prefix() {
    select {
        padding-top: 13px;
   }
}

Ответ 4

Я столкнулся с этой проблемой точно. Мои параметры выбора были вертикально центрированы в webkit, но ff дефолтировали их сверху. Осмотревшись, я действительно не хотел создавать работу, которая была грязной и в конечном итоге не решила мою проблему.

Решение: Javascript.

if ($.browser.mozilla) {
            $('.styledSelect select').css( "padding-top","8px" );
        }

Это очень точно решает вашу проблему. Единственным недостатком здесь является то, что я использую jQuery, и если вы уже не используете jQuery в своем проекте, вы можете не захотеть включить js-библиотеку для одноразового использования.

Примечание. Я не рекомендую стилизовать что-либо с помощью js, если это абсолютно необходимо. CSS всегда должен быть основным решением для стилизации - подумайте о jQuery (в данном конкретном примере) как топор, обозначенный как "Break in Emergency".

* ОБНОВЛЕНИЕ * Это старый пост, и, поскольку кажется, что люди все еще ссылаются на это решение, я должен указать (как указано в комментариях), что с 1.9 эта функция была удалена из jQuery. Пожалуйста, см. Проект Modernizr для выполнения обнаружения функции вместо браузера sniffing.

Ответ 5

как раз была эта проблема, но для мобильных устройств, в основном мобильных firefox. Трюк для меня состоял в том, чтобы определить высоту высота, отступы, высота строки и, наконец, размер окна, все на элемент выбора. Не используйте ваши номера примеров здесь, но для примера:

padding: 20px;
height: 60px;
line-height: 1;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;

Ответ 6

Пока это отлично работает для меня:

line-height: 100%;

Ответ 7

Я пробовал как следует, и это сработало для меня:

select {
     line-height:normal;
     padding:3px;
} 

Ответ 8

Я обнаружил, что просто установка высоты линии и высоты в одну и ту же величину пикселя дает самый последовательный результат. Под "самой последовательной" я имею в виду оптимальную последовательность, но, конечно, она не является 100-процентным "пиксельным совершенством" в браузерах. Кроме того, я обнаружил, что Firefox (v. 17.x) имеет тенденцию толковать текст опции справа от стрелки раскрывающегося списка; Я уменьшил это с помощью небольшого количества исправлений, установленных только на элементе OPTION. Этот параметр не влияет на внешний вид в IE 7-9.

Мой результат:

select, option {
    font-size:10px;
    height:19px;
    line-height: 19px;
    padding:0;
    margin:0;
}

option {
    padding-right:6px; /* Firefox */
}

ПРИМЕЧАНИЕ. - Мой элемент SELECT использует меньший шрифт, 10px. Очевидно, вам нужно будет соответствующим образом скорректировать пропорции для вашего конкретного контекста пользовательского интерфейса.

Ответ 9

Попробуйте установить атрибут "высота строки"

Вот так:

select{
    height: 28px !important;
    line-height: 28px;
}

Здесь вы найдете некоторую документацию об этом атрибуте:

http://www.w3.org/wiki/CSS/Properties/line-height

http://www.w3schools.com/cssref/pr_dim_line-height.asp

Ответ 10

Раньше я использовал height и line-height с теми же значениями, но доказал, что они не соответствуют друг другу. Мой текущий подход состоит в том, чтобы смешать это с заполнением, как это.

select {
  font-size:14px;
  height:18px;
  line-height:18px;
  padding:5px 0;
  width:200px;
  text-align:center;
}

Вы также можете использовать padding для горизонтального значения вместо width + text-align

Ответ 11

У меня была такая же проблема, и я работал над ней часами. Я, наконец, придумал то, что работает.

В принципе, я не пробовал работать в каждой ситуации, пока я не разместил div для репликации текста первого параметра над полем выбора и оставил фактический первый вариант пустым. Я использовал {pointer-events: none;}, чтобы пользователи щелкали по div.

HTML

    <div class='custom-select-container'>
      <select>
        <option></option>
        <option>option 1</option>
        <option>option 2</option>
      </select>
      <div class='custom-select'>
        Select an option
      </div>
    <div>

CSS

.custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;}

Ответ 12

Я обнаружил, что только добавление padding-top сдвинуло вниз по стрелке вниз со стрелкой вниз справа, что было нежелательно.

Метод, который работал у меня, заключался в том, чтобы войти в инспектор и постепенно добавлять padding, пока текст не будет центрирован. Это также уменьшит размер выпадающего значка, но он будет центрирован, так что это не так визуально тревожит.

Ответ 13

Теперь это исправлено в Firefox Nightly и будет в следующей версии firefox.

Пожалуйста, просмотрите эту ошибку для получения дополнительной информации https://bugzilla.mozilla.org/show_bug.cgi?id=610733

Ответ 14

Вы можете дать:

select{
   position:absolute;
   top:50%;
   transform: translateY(-50%);
}

и родителю вы должны указать положение: относительное. это будет работать.

Ответ 15

display: flex;
align-items: center;

Ответ 16

Ближайшее общее решение, которое я знаю, использует свойство box-align, как описано здесь. Рабочий пример здесь (я могу проверить его только в Chrome, полагаю, что имеет эквивалент для других браузеров).

CSS

select{
  display:-webkit-box;
  display:-moz-box;
  display:box;
  height: 30px;;
}
select:nth-child(1){
  -webkit-box-align:start;
  -moz-box-align:start;
  box-align:start;
}
select:nth-child(2){
  -webkit-box-align:center;
  -moz-box-align:center;
  box-align:center;
}
select:nth-child(3){
  -webkit-box-align:end;
  -moz-box-align:end;
  box-align:end;
}