it-swarm.com.ru

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

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

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

Спасибо!

63
datauser

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

padding-top:4px;

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

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

ПРАВКА

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

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

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

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

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

18
Shelly Skeens

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

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

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

Решение: Javascript.

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

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

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

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

4
Scott Sword

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

line-height: 100%;
2
user3403273

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

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

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

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

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

Попробуйте установить атрибут "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

0
AndreaRivadossi

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

В принципе, все, что я пробовал, работало в каждой ситуации, пока я не разместил 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;}
0
Adam Ulivi
display: flex;
align-items: center;
0
Victor Bredihin

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

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

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

0
puja

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

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

0
lukefrake

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

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

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

0
Jason Lydon

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

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

0
laurencedorman