Vertical-align not working on table cell containing button - html

Question

The following code is self-explanatory but does not produce the desired effect:
.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>
I have tried using line-height to rectify the problem, but cannot get it to resolve the issue completely.
If font-size: 35px; is removed, vertical-align works properly.

Answer 1

The problem is that, when you increase font-size, browsers will also increase line-height's initial value:
normal: Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning
as . We recommend a used value for 'normal' between 1.0
to 1.2.
That means that, with font-size: 35px, a line-height: normal will probably be between 35px and 42px.
Therefore, the line box which contains the button will be, at least, as tall as that value:
'line-height' specifies the minimal height of line boxes within the
element.
However, you button is not so tall. Therefore, the button is vertically aligned inside the line box according to button's vertical-align:
[vertical-align] affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
To fix that, you can
Apply the same vertical-align as the table cell to the button.
You can do this easily with
.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>
Reduce the line-height, so that th height of the line box will be as tall as the button.
.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>

Answer 2

Just set the line-height of your first 2 tds to 0 by adding td.r1, td.r2{line-height: 0;} to your CSS and it will work.
.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;}
<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>