Я хочу выровнять текст по вертикали в поле выбора - PullRequest
64 голосов
/ 26 марта 2011

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

select{
   verticle-align:middle;
}

, однако это не работает ни в одном браузере.По умолчанию Chrome выравнивает текст в поле выбора по центру.FF выравнивает его по верху, а IE выравнивает по низу.Есть ли способ добиться этого?Я использую виджет Select GWT в UIBinder.

Это то, что у меня сейчас есть:

select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

Спасибо!

Ответы [ 16 ]

47 голосов
/ 26 марта 2011

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

padding-top:4px;

Количество необходимых отступов будет зависеть от размера шрифта.

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

EDIT

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

A. Удалите атрибут height и позвольте браузеру обработать его. Обычно это работает лучше всего для меня.

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

B. Добавьте верхний отступ, чтобы опустить текст. (Опускается вниз стрелка в некоторых браузерах)

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

C. Вы можете увеличить шрифт, чтобы он соответствовал выбранной высоте немного лучше.

<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>
19 голосов
/ 14 июня 2011

Я наткнулся на этот набор свойств 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.Это не работает после тестирования.Тем не менее, для всех, кто интересуется, проблема заключается в том, что встроенные стили в файле forms.css FF влияют на ввод и выбор элементов.Это свойство высота строки: нормальное! Важно .Это не может быть отменено.Я пробовал.Я обнаружил, что если я удаляю встроенное свойство в Firebug, я получаю элемент select с разумно вертикально центрированным текстом.

10 голосов
/ 12 февраля 2014

Мое решение состоит в том, чтобы добавить верхний отступ для выбора, предназначенного только для Firefox, вот так

// firefox vertical aligment of text
@-moz-document url-prefix() {
    select {
        padding-top: 13px;
   }
}
4 голосов
/ 26 августа 2012

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

2 голосов
/ 23 июля 2014

Пока у меня все работает нормально:

line-height: 100%;
2 голосов
/ 20 февраля 2014

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

padding: 20px;
height: 60px;
line-height: 1;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
1 голос
/ 04 января 2013

Я обнаружил, что простая установка высоты строки и высоты на одинаковое количество пикселей дает наиболее стабильный результат.Под «наиболее согласованным» я подразумеваю оптимально согласованный, но, конечно, он не на 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 используется шрифт меньшего размера, 10 пикселей.Очевидно, вам нужно будет настроить пропорции соответственно для вашего конкретного контекста пользовательского интерфейса.

1 голос
/ 21 марта 2012

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

select {
     line-height:normal;
     padding:3px;
} 
0 голосов
/ 10 апреля 2019
display: flex;
align-items: center;
0 голосов
/ 23 мая 2018

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

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

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

...