均匀降低div的高度

Question

正在尝试降低CSS类的高度：

http://jsfiddle.net/25LjE/76/

我正在降低类pds-vote的高度：

.pds-vote {
background-color:#424242;
    height:20px !important;
}

但是高度并未均匀降低。投票按钮下方的高度小于其上方的高度，高度是否可以均匀减小，以使投票按钮上方和下方的边框相等？

小提琴后面的代码：

.pds-question-top {
font-size:10pt !important;
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
}

.pds-pd-link, .pds-comments {
display:none !important;
}

.pds-box {
width:220px !important;
}

.pds-input-label {
width:85% !important;
}

.PDS_Poll {
margin-bottom:15px;
}

.pds-answer-span {
color:#00f;
}

.pds-vote {
background-color:#424242;
}

.pds-answer-text {
color:#00f;
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
}

.pds-answer-feedback {
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
}

.pds-votebutton-outer {
text-align:center;
}

.pds-answer-group {
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
height:auto;
overflow:hidden;
}

.pds-input-label,.pds-answer-input {
float:left;
}

.pds-view-results,.pds-links {
color:#FFF !important;
padding-top:1px !important;
padding-bottom:1px !important;
margin-top:1px !important;
margin-bottom:1px !important;
}

.pds-comments,.pds-return-poll {
color:#FFF !important;
}

.pds-links {
    display: inline !important;
}
.pds-pd-link {
display: none !important;
}
.pds-box {
    width: 220px !important;
}
.pds-input-label{
    width: auto! important;
}
.PDS_Poll{
    margin-bottom:15px;
}

.pds-question-top {padding:0 !important}

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script>
<noscript><a href="http://polldaddy.com/poll/6352993/">This is very long test question to test how polldaddy handles questions that exceed that normal length............ yes a very long question indeed..............</a></noscript>

$(document).ready(function() {

    $('.pds-question-inner').prepend('<span style="color:red;font-weight:bold;font-size: 15px;float:left">Header</span>');
});

Answer 1

将line-height设置为与height相同的值，并删除所有填充。这样，内容为垂直居中，从而使高度均匀分布：http://jsfiddle.net/25LjE/77/。

.pds-vote {
    background-color: #424242;
    height: 40px !important;  /* 20px does not fit the contents */
    line-height: 40px !important;
    padding: 0 !important;
}

Answer 2

您的投票按钮高于20像素，这就是为什么该按钮溢出您的“居中”容器的原因。

而不是设置.pds-vote的高度，减少其容器的填充。

.pds-vote {
    background-color: #424242;
}
#PDI_container6352993 .pds-vote {
    padding: 4px 0px;
}

Answer 3

在HTML / TR / TD中遇到了与此类似的问题。通过使用DIV并在DIV和跨度上设置高度来解决它'这是为了减小TD高度Dim strDivXsmallheight As String =“”