☰

選択ボックス内のテキストを垂直に揃えたい 質問する

tag-icon • tag-icon css gwt select vertical-alignment
選択ボックス内のテキストを垂直に揃えたい 質問する

選択ボックス内のテキストを垂直に揃えたいのですが、

select{
   verticle-align:middle;
}

ただし、どのブラウザでも機能しません。Chrome は、選択ボックス内のテキストをデフォルトで中央揃えにするようです。FF は上揃え、IE は下揃えにします。これを実現する方法はありますか? UIBinder で GWT の Select ウィジェットを使用しています。

現在私が持っているものは次のとおりです:

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

ありがとう！

ベストアンサー1

おそらく最善の選択肢は、上部のパディングを調整し、ブラウザ間で比較することです。完璧ではありませんが、できる限り近い結果になると思います。

padding-top:4px;

必要なパディングの量はフォント サイズによって異なります。

ヒント: フォントが に設定されている場合px、パディングも に設定してくださいpx。 フォントが に設定されている場合em、パディングも に設定してくださいem。

編集

vertical-align はブラウザ間で一貫していないため、これらが選択肢になると思います。

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>

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>

おすすめ記事