首页 新闻 会员 周边 捐助

一个css问题,各位帮忙。最近发现自己css很烂。来个高手吧

0
悬赏园豆:10 [已解决问题] 解决于 2014-03-14 14:54

如何让下拉框在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>
复制代码
空明流光的主页 空明流光 | 初学一级 | 园豆:111
提问于:2014-03-14 11:50
< > 字节跳动旗下AI助手豆包
分享
最佳答案
0

把 display: block; 换成 display: table-cell;

收获园豆:10
Yu | 专家六级 |园豆:12990 | 2014-03-14 14:14

高手,一语中的

空明流光 | 园豆:111 (初学一级) | 2014-03-14 14:54
其他回答(2)
0

#PinYinEditor1_dataContainer ul.pinyin
        {
            padding: 0px;
            margin: 0px;
            list-style-type: none;
            vertical-align: bottom;
        }中加个text-align:center;

User_Yong | 园豆:137 (初学一级) | 2014-03-14 12:02

这肯定不行啊

支持(0) 反对(0) 空明流光 | 园豆:111 (初学一级) | 2014-03-14 12:09
0
#PinYinEditor1_dataContainer
{
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    vertical-align: middle;
    display: table-cell;
}
✎﹏ℳ๓₯㎕ღ | 园豆:1499 (小虾三级) | 2014-03-14 12:05

IE11下不行啊,没任何效果

支持(0) 反对(0) 空明流光 | 园豆:111 (初学一级) | 2014-03-14 12:11

@沧海一杰: 用line-height试试

支持(0) 反对(0) ✎﹏ℳ๓₯㎕ღ | 园豆:1499 (小虾三级) | 2014-03-14 13:22

@MrLenon: 算了,看来你也不会

支持(0) 反对(0) 空明流光 | 园豆:111 (初学一级) | 2014-03-14 13:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册
Top