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

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

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

во всяком случае, это толкает текст вниз еще дальше в IE8. Если я поставил коробку размерами собственность обратно до границы-коробка, то она как минимум не хуже ИЕ8 (и ФФ все еще применяется -МОЗ-коробке-калибровка собственность). Было бы неплохо найти решение для IE, но я не задерживаю дыхание.

Edit: Nix это. Это не работает после тестирования. Однако для всех, кто заинтересован, проблема, похоже, связана со встроенными стилями в формах FF.css-файл, влияющий на ввод и выбор элементов. Свойство в вопросе является линия-высота:нормально !важно. Его нельзя переопределить. Я пытался. Я обнаружил, что если я удалю встроенное свойство в Firebug, я получу элемент select с достаточно вертикально центрированным текстом.

мое решение-добавить padding-top для select targeted to firefox только так

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

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

Решение: Javascript.

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

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

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

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

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

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

пока это работает нормально для меня:

line-height: 100%;

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

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

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

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

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

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

Примечание -- мой элемент SELECT использует меньший шрифт, 10px. Очевидно, вам нужно будет настроить пропорции соответственно для вашего конкретного контекста пользовательского интерфейса.

попробуйте установить атрибут "line-height"

такой:

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

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

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

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

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

в основном ничего я не пробовал работать в каждой ситуации, пока я не разместил 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;}

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

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

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

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

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

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

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

ближайшее общее решение, которое я знаю, использует свойство 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;
}