Rumah >hujung hadapan web >html tutorial >如何让下拉框在div中垂直居中？_html/css_WEB-ITnose
如何让下拉框在div中垂直居中？_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:07:082068semak imbas
<!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 可以去掉
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：列表页调用当前栏目的子类织梦标签_html/css_WEB-ITnoseArtikel seterusnya：创意十足！25个服饰行业的网站设计作品_html/css_WEB-ITnose