How can I center the dropdown box vertically in a div? _html/css

How can I center the dropdown box vertically in a div? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:07:08

Original

2032 people have browsed it

<!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&aacute;ng">h&aacute;ng</option>                        <option value="h&agrave;ng">h&agrave;ng</option>                        <option value="h&eacute;ng">h&eacute;ng</option>                        <option value="x&iacute;ng">x&iacute;ng</option>                    </select></div>                行</li>        </ul>    </div></body></html>

Copy after login

Reply to discussion (solution)

<!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&aacute;ng">h&aacute;ng</option>                        <option value="h&agrave;ng">h&agrave;ng</option>                        <option value="h&eacute;ng">h&eacute;ng</option>                        <option value="x&iacute;ng">x&iacute;ng</option>                    </select></span>                    </div>                行</li>        </ul>    </div></body></html>

Copy after login

Thanks to the classmates above, but this The solution won't work. The premise is that you can't change the html, you can only change the header, because I only gave one. This page has an average of 5,000 such Chinese pinyin, so if you change it like this, the size of the page will suddenly increase by dozens of K, and the impact will be performance.

If you do not consider compatibility with IE6/7, span can be removed