垂直對齊中間的下拉列表

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的行高應使文本與中間對齊。