以下代码不言自明,但未产生预期效果:
.t5{margin: auto; width: 50%; font-size: 35px;}
.t5 td{border-style: solid; border-width: 1px; text-align: center; height:100px;}
.t5 td.r1{vertical-align: top;};
.t5 td.r2{vertical-align: middle;}
.t5 td.r3{vertical-align: bottom;}

<table class="t5">
<tr>
<td class="r1"><INPUT type = "button" value = " Does not align at top"></td>
<td class="r2"><INPUT type = "button" value = " Does not align in middle"></td>
<td class="r3">Large Text</td>
</tr>
</table>
&#13;
我尝试使用line-height
来解决问题,但无法让它完全解决问题。
如果删除了font-size: 35px;
,则vertical-align
正常运行。
答案 0 :(得分:1)
问题在于,当您增加font-size
时,浏览器也会增加line-height
的初始值:
正常:告诉用户代理根据元素的字体将使用的值设置为“合理”值。该值具有相同的含义 为。我们建议使用1.0之间的“正常”值 到1.2。
这意味着,font-size: 35px
line-height: normal
可能介于35px和42px之间。
因此,包含该按钮的line box至少与该值一样高:
'line-height'指定其中的行框的最小高度 元件。
但是,你的按钮不是那么高。因此,根据按钮的vertical-align
:
[vertical-align]影响行框内的垂直定位 由内联级元素生成的框。
要解决这个问题,你可以
将与表格单元格相同的vertical-align
应用于按钮。
您可以使用
轻松完成此操作.t5 input[type=button] {
vertical-align: inherit;
}
.t5 {
font-size: 35px;
}
.t5 td {
border: 1px solid;
text-align: center;
height: 100px;
}
.t5 td.r1 {
vertical-align: top;
}
.t5 td.r2 {
vertical-align: middle;
}
.t5 td.r3 {
vertical-align: bottom;
}
.t5 input[type=button] {
vertical-align: inherit;
}
<table class="t5">
<tr>
<td class="r1">
<input type="button" value="Does not align at top" />
</td>
<td class="r2">
<input type="button" value="Does not align in middle" />
</td>
<td class="r3">Large Text</td>
</tr>
</table>
减少line-height
,以便线框的高度与按钮一样高。
.r1, .r2 {
line-height: 0;
}
.t5 {
font-size: 35px;
}
.t5 td {
border: 1px solid;
text-align: center;
height: 100px;
}
.t5 td.r1 {
vertical-align: top;
}
.t5 td.r2 {
vertical-align: middle;
}
.t5 td.r3 {
vertical-align: bottom;
}
.r1, .r2 {
line-height: 0;
}
<table class="t5">
<tr>
<td class="r1">
<input type="button" value="Does not align at top" />
</td>
<td class="r2">
<input type="button" value="Does not align in middle" />
</td>
<td class="r3">Large Text</td>
</tr>
</table>
答案 1 :(得分:0)
只需将td
添加到CSS中即可将前2 td.r1, td.r2{line-height: 0;}
s的行高设置为0,这样就可以了。
.t5{margin: auto; width: 50%; font-size: 35px;}
.t5 td{border-style: solid; border-width: 1px; text-align: center; height:100px;}
.t5 td.r1{vertical-align: top;}
.t5 td.r2{vertical-align: middle;}
.t5 td.r3{vertical-align: bottom;}
td.r1, td.r2{line-height: 0;}
&#13;
<table class="t5">
<tr>
<td class="r1" valign="top"><INPUT type = "button" value = " Does not align at top"></td>
<td class="r2" valign="middle"><INPUT type = "button" value = " Does not align in middle"></td>
<td class="r3">Large Text</td>
</tr>
</table>
&#13;