如何水平和垂直居中选择框 [英] How to center horizontally and vertically a select box

问题描述

我尝试以水平和垂直方向居中选择框

以下是jsfiddle - http://jsfiddle.net/j3r9Lp81/

CSS：

  div.currency {
 text-align：center; 
} 
  

HTML：

 < div class =wrapper> 
< div class =currency> 
< select id =currency> 
< option value =GBP>英镑< / option> 
< option value =EUR>欧元< / option> 
< option value =USD>美元< / option> 
< option value =AUD>澳元美元< / option> 
< option value =CAD>加元< / option> 
< option value =JPY>日元< / option> 
< option value =CHF>瑞士法郎< / option> 
< option value =SEK>瑞典克朗< / option> 
< option value =NZD>新西兰元< / option> 
< option value =NZD>港元< / option> 
< / select> 
< / div> 
< / div> 
  

预先感谢您

解决方案

您可以这样做，以便水平和垂直居中选择框。

JSFiddle - DEMO

CSS： $ b

  div.wrapper {
 background：＃F00; 
宽度：100％; 
 height：300px; 
 display：table; 
} 
 div.currency {
 text-align：center; 
 display：table-cell; 
 vertical-align：middle; 
} 
  

I'm trying to center horizontally and vertically a select box

Here is jsfiddle - http://jsfiddle.net/j3r9Lp81/

CSS:

div.currency {
    text-align:center;
}

HTML:

<div class="wrapper">
        <div class="currency">
            <select id="currencies">
                <option value="GBP">Great Britain Pound</option>
                <option value="EUR">Euro</option>
                <option value="USD">US Dollar</option>
                <option value="AUD">Australian Dollar</option>
                <option value="CAD">Canadian Dollar</option>
                <option value="JPY">Japanese Yen</option>
                <option value="CHF">Swiss Franc</option>
                <option value="SEK">Swedish Krona</option>
                <option value="NZD">New Zealand Dollar</option>
                <option value="NZD">Hong Kong Dollar</option>
            </select>
        </div>
    </div>

Thank you in advance

解决方案

You could do it like this to center horizontally and vertically the select box.

JSFiddle - DEMO

CSS:

div.wrapper {
    background: #F00;
    width: 100%;
    height: 300px;
    display: table;
}
div.currency {
    text-align:center;
    display: table-cell;
    vertical-align: middle;
}

这篇关于如何水平和垂直居中选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！