垂直对齐不适用于包含按钮的表格单元格

时间:2015-03-12 18:21:54

标签: html css

以下代码不言自明,但未产生预期效果:



    .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;
&#13;
&#13;

我尝试使用line-height来解决问题,但无法让它完全解决问题。

如果删除了font-size: 35px;,则vertical-align正常运行。

2 个答案:

答案 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,这样就可以了。

&#13;
&#13;
.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;
&#13;
&#13;