Как вертикально выровнять текст в середине в формате HTML?

Я не нашел объяснений в Интернете о том, как выравнивать по вертикали текст в HTML select. Я не хочу выровнять текст в <option></option>, потому что это не сложно. Я хочу выровнять текст, который выбран в <select></select>.Как вертикально выровнять текст в середине в формате HTML?

Я просматривал такие браузеры, как Firefox, Opera, Chrome и Internet Explorer, и текст по умолчанию только по умолчанию в Opera и Chrome. В Firefox он будет наверху, в Internet Explorer он будет снижаться.

Как это можно сделать таким же образом во всех браузерах?

источник

2010-11-25 red

Не могли бы вы опубликовать код, который вы пробовали до сих пор? – romaintaz 2010-11-25 07:50:53

Я пробовал это @http: //jsfiddle.net/HfWHT/ Он работает с firefox, но nt chrome – crodjer 2010-11-25 08:15:27

Итак, вы имеете в виду _vertically_ align? – Jeriko 2010-11-25 08:40:37

Да, вертикально выровнять средний :-)

Пример

Если бы текст, как «собака, кошка, тигр» в опции и первый вариант выбран «собака», а высоту < select> установлен 34 пикселя, но размер шрифта равен 12 пикселям, поэтому вы увидите, что текст будет намного меньше, чем < select>, и поэтому он будет выровнен в одном браузере сверху, а другой внизу и в другом он будет выровнен по середине. Я хочу, чтобы текст был выровнен по вертикали во всех браузерах.

Вот простой код, который показывает проблему

<html> 
    <body> 
     <style> 
      .select{ 
       height:34px; 
       font-size:12px; 
      } 
     </style> 

     <select class="select"> 
      <option>dog</option> 
      <option>cat</option> 
      <option>tiger</option> 
     </select> 
    </body> 
</html>

источник

2010-11-26 08:14:46 red

Единственное решение, которое я наткнулся, что может вертикального выравнивания текста в <select> тега в Firefox (FF 11) является использование отступов:

select.yourclass 
{ 
    font-size: 1.1em; /* Size of the text */ 

height: 41px; /* The height you want the <select> to be */ 
padding-top: 7px; /* how far from the top you want the text to appear */ 
}

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

Единственным недостатком этого решения является то, что кажется, что в Firefox ниспадающая стрелка в элементе управления также сдвигается вниз на значение padding-top, поэтому оно отнюдь не идеально.

источник

2012-03-03 08:44:59 ose

Вы должны использовать метки для выравнивания Heres скрипки: http://jsfiddle.net/E7mxq/2/

источник

2012-06-06 20:18:26 Casualbot

Похожего ответ на @ShawnBernard.

Но вам нужно создать определенную ширину для элемента select в форме. После этого добавьте text-align: center; в выбранный CSS и настройте дополнение для элемента select.

Что создаёт CSS для формы опций, что только увеличивает фактический раскрывающийся фон.

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

ОБНОВЛЕНИЕ: Как и @RajivPingale, форма параметров не будет взята из-за определенных подпрограмм браузера. Таким образом, эта возможность не будет работать со всеми браузерами.

Вот мой jsFiddle: http://jsfiddle.net/abrielshipley/Y4eJm/4/

источник

2012-12-05 08:09:28 Abriel

С одной стороны, выравнивание текста относится к блоку только элементам уровня. Но , даже если вы назначаете отображение: блок для элементов выбора и выбора, тексты, вероятно, не будут центрированы. Причина в том, что браузеры используют свои встроенные процедуры для полей формы рендеринга, и эти подпрограммы подвержены влиянию CSS-правил только в ограниченной степени.

вы можете пойти на JQuery выпадающего меню

источник

2012-12-05 08:30:19

Я нашел следующий CSS, как самый простой способ:

select{ 
    padding-top: 4px; 
}

конечно вы бы скорректировать значение заполнените в соответствии с вашим шрифтом. Вы также можете настроить таргетинг так: #SIDID select { padding-top: 4px; }

Есть более опытные выглядывает там, но это мои два бита :-)

Приветствиях

источник

2013-04-05 13:18:09

Как вертикально выровнять текст в середине в формате HTML?

ответ

Смежные вопросы