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

<p>я хочу выровнять текст по вертикали в поле выбора. я пытался с помощью </p><pre><code>select{ verticle-align:middle; } </code></pre><p>однако это не работает ни в одном браузере. по умолчанию chrome выравнивает текст в поле выбора по центру. ff выравнивает его по верху, а ie выравнивает по низу. есть ли способ добиться этого? я использую виджет select gwt в uibinder.</p><p>это то, что у меня сейчас есть:</p><pre><code>select{ height: 28px !important; border: 1px solid #abadb3; margin: 0; padding: 0; vertical-align: middle; } </code></pre><p>спасибо!</p>

<p>лучшим вариантом, вероятно, будет настройка верхнего отступа и сравнение в разных браузерах. это не идеально, но я думаю, что это как можно ближе.</p><pre><code>padding-top:4px; </code></pre><p>количество отступов будет зависеть от размера шрифта.</p><p>подсказка: если ваш шрифт установлен в <code>px</code>, также установите отступ в <code>px</code>. если ваш шрифт установлен в <code>em</code>, также установите отступ в <code>em</code>.</p><p><strong>правка</strong></p><p>я думаю, что у вас есть эти варианты, поскольку выровнять по вертикали не одинаково во всех браузерах.</p><p>a. удалите атрибут высоты и позвольте браузеру обработать его. это обычно работает лучше всего для меня.</p><pre><code> <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> </code></pre><hr><p>б. добавьте верхний отступ, чтобы нажать вниз текст. (нажал на стрелку в некоторых браузерах)</p><pre><code><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> </code></pre><hr><p>c. вы можете сделать шрифт больше, чтобы попытаться соответствовать выбранной высоте немного лучше.</p><pre><code><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> </code></pre>

<p>я наткнулся на этот набор свойств css, которые, кажется, вертикально выравнивают текст в выбранных элементах размера в firefox:</p><pre><code>select { box-sizing: content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } </code></pre><p>если что-нибудь, однако, это толкает текст еще дальше в ie8. если я установлю свойство box-sizing обратно на border-box, это, по крайней мере, не ухудшит ie8 (и ff все еще применяет свойство -moz-box-sizing). было бы неплохо найти решение для ie, но я не задерживаю дыхание.</p><p><strong> правка: </strong>nix это. это не работает после тестирования. тем не менее, для всех, кто интересуется, проблема, кажется, связана со встроенными стилями в файле ff forms.css, влияющими на ввод и выбор элементов. рассматриваемое свойство:<strong> высота строки: нормальное! важное </strong>. это не может быть отменено. я пробовал. я обнаружил, что если я удаляю встроенное свойство в firebug, я получаю элемент select с разумно вертикально центрированным текстом. </p>

<p>мое решение состоит в том, чтобы добавить padding-top для выбора, предназначенного только для firefox, вот так</p><pre><code>// firefox vertical aligment of text @-moz-document url-prefix() { select { padding-top: 13px; } } </code></pre>

<p>пока это работает нормально для меня:</p><pre><code>line-height: 100%; </code></pre>

<p>просто была эта проблема, но для мобильных устройств, в основном<strong> mobile firefox </strong>. уловка для меня заключалась в том, чтобы определить<strong> высоту </strong>,<strong> отступы </strong>,<strong> высоту строки </strong>и, наконец,<strong> размер поля </strong>, все на элементе select. не используя ваши номера примеров здесь, но ради примера: </p><pre><code>padding: 20px; height: 60px; line-height: 1; -webkit-box-sizing: padding-box; -moz-box-sizing: padding-box; box-sizing: padding-box; </code></pre>

<p>я обнаружил, что простая установка высоты строки и высоты на одно и то же количество пикселей дает наиболее последовательный результат. под «наиболее согласованным» я подразумеваю оптимально согласованное, но, конечно, оно не на 100% «идеально подходит для пикселей» во всех браузерах. кроме того, я обнаружил, что firefox (v. 17.x) имеет тенденцию вытеснять текст опции справа против выпадающей стрелки; я смягчил это с помощью небольшого количества отступа вправо только для элемента option. этот параметр не влияет на внешний вид в ie 7-9.</p><p>мой результат:</p><pre><code>select, option { font-size:10px; height:19px; line-height: 19px; padding:0; margin:0; } option { padding-right:6px; /* firefox */ } </code></pre><p>примечание - мой элемент select использует шрифт меньшего размера, 10 пикселей. очевидно, вам нужно будет настроить пропорции соответственно для вашего конкретного контекста пользовательского интерфейса.</p>

<p>я попытался следующим образом, и это сработало для меня: </p><pre class="lang-css prettyprint-override"><code>select { line-height:normal; padding:3px; } </code></pre>

<p>попробуйте установить атрибут "line-height"</p><p>как это:</p><pre><code>select{ height: 28px !important; line-height: 28px; } </code></pre><p>вот некоторая документация по этому атрибуту:</p><p> <a href="http://www.w3.org/wiki/css/properties/line-height">http://www.w3.org/wiki/css/properties/line-height</a> </p><p> <a href="http://www.w3schools.com/cssref/pr\_dim\_line-height.asp">http://www.w3schools.com/cssref/pr\_dim\_line-height.asp</a> </p>

<p>у меня была такая же проблема, и я работал над ней часами. я наконец-то придумал что-то, что работает. </p><p>в принципе, все, что я пробовал, работало в каждой ситуации, пока я не разместил div для копирования текста первого параметра поверх поля выбора и не оставил фактический первый параметр пустым. я использовал {pointer-events: none;}, чтобы позволить пользователям переходить через div. </p><p>html</p><pre><code> <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> </code></pre><p>css</p><pre><code>.custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;} </code></pre>

<pre><code>display: flex; align-items: center; </code></pre>

<p>вы можете дать : </p><pre><code>select{ position:absolute; top:50%; transform: translatey(-50%); } </code></pre><p>и родителю вы должны указать положение: относительно ... это будет работать.</p>

<p>это было исправлено в firefox nightly и будет в следующей сборке firefox.</p><p>пожалуйста, смотрите эту ошибку для получения дополнительной информации <a href="https://bugzilla.mozilla.org/show\_bug.cgi?id=610733">https://bugzilla.mozilla.org/show\_bug.cgi?id=610733</a> </p>

<p>раньше я использовал <code>height</code> и <code>line-height</code> с одинаковыми значениями, но они оказались несовместимыми между сетями. мой текущий подход состоит в том, чтобы смешать это с отступом, как это.</p><pre><code>select { font-size:14px; height:18px; line-height:18px; padding:5px 0; width:200px; text-align:center; } </code></pre><p>вы также можете использовать <code>padding</code> для горизонтального значения вместо <code>width</code> + <code>text-align</code></p>

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