垂直对齐中间的下拉列表

Question

我正在使用自定义CSS设计asp：DropDownList元素。我设置了高度，我试图让文本出现在元素的中间，而不是在底部。垂直对齐：中间似乎不起作用，如果我添加padding-bottom从底部向上推，在IE中，下拉菜单右边的箭头和边框之间有一个难看的间隙。这是我目前的CSS：

.dropdowndiv
{
    font-size:10pt;
    margin-bottom:2px;
    height:26px;
    width:220px;
    border:1px solid #d5d5d5;
    text-transform:uppercase;
    vertical-align:middle;
}

Answer 1

试试这个：

.dropdowndiv
{
    font-size:10pt;
    padding-bottom:4px;
    height:26px;
    width:220px;
    border:1px solid #d5d5d5;
    text-transform:uppercase;
    vertical-align:middle;
}

我将2px的margin-bottom设置更改为4px的填充底部。

<强>更新

看起来很好，但你可以在任何一侧添加填充物，以便按照你想要的方式获得它。

如果你不想看标签映射 - Lee Dumond在他的博客上提出了这个问题，以回应我当时遇到的类似问题：

http://leedumond.com/blog/fixing-asp-net-server-control-rendering-issues-with-tag-mapping/

Answer 2

添加26px的行高应使文本与中间对齐。