如何让下拉框在div中垂直居中?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style id="PinYinEditor_CSS_PinYinEditor1_dataContainer" type="text/css"> #PinYinEditor1_dataContainer ul.pinyin { padding: 0px; margin: 0px; list-style-type: none; vertical-align: bottom; } #PinYinEditor1_dataContainer ul.pinyin li { display: inline-block; margin: 0px; padding: 0px; margin-bottom: 10px; margin-right: 2px; font-size: 16px; } #PinYinEditor1_dataContainer ul.pinyin li div { border:1px solid blue; display: block; height: 50px; line-height: 50px; margin: 0px; margin-bottom: 3px; padding: 0px; text-align: left; vertical-align: middle; } #PinYinEditor1_dataContainer ul.pinyin li select { padding: 0px; margin: 0px; font-size: 12px; } </style> </head> <body> <div id="PinYinEditor1_dataContainer"> <ul class="pinyin"> <li> <div> <select name="PinYinEditor1$rptPinYin$ctl01$ddlPinYin" id="PinYinEditor1_rptPinYin_ctl01_ddlPinYin"> <option selected="selected" value="háng">háng</option> <option value="hàng">hàng</option> <option value="héng">héng</option> <option value="xíng">xíng</option> </select></div> 行</li> </ul> </div> </body> </html>
把 display: block; 换成 display: table-cell;
高手,一语中的
#PinYinEditor1_dataContainer ul.pinyin
{
padding: 0px;
margin: 0px;
list-style-type: none;
vertical-align: bottom;
}中加个text-align:center;
这肯定不行啊
#PinYinEditor1_dataContainer { text-align: center; margin: 0 auto; overflow: hidden; vertical-align: middle; display: table-cell; }
IE11下不行啊,没任何效果
@沧海一杰: 用line-height试试
@MrLenon: 算了,看来你也不会