Heim > Artikel > Web-Frontend > 如何让下拉框在div中垂直居中？_html/css_WEB-ITnose
如何让下拉框在div中垂直居中？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:07:082066Durchsuche
<!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>
回复讨论(解决方案)
<!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:table-cell; height: 50px; line-height: 50px; margin: 0px; margin-bottom: 3px; padding: 0px; text-align: left; vertical-align: middle; *position:relative; } #PinYinEditor1_dataContainer ul.pinyin li div span { *position:absolute; *top:50%; } #PinYinEditor1_dataContainer ul.pinyin li select { padding: 0px; margin: 0px; font-size: 12px; *position:relative; *top:-50%; } </style></head><body> <div id="PinYinEditor1_dataContainer"> <ul class="pinyin"> <li> <div> <span> <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></span> </div> 行</li> </ul> </div></body></html> 感谢楼上的同学，但是这个方案行不通，前提是不能改动html，只能改header，因为我只给出了一个，这个页面平均有5000个这样的汉字拼音，所以你这样改页面的大小就会骤增几十K，影响性能。
如果你不考虑兼容IE6/7的话span 可以去掉
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：列表页调用当前栏目的子类织梦标签_html/css_WEB-ITnoseNächster Artikel：创意十足！25个服饰行业的网站设计作品_html/css_WEB-ITnose