无法垂直对齐TD内的文本 [英] Unable to vertically align text inside a TD

问题描述

我正在尝试在 TD 中垂直居中文本。

我尝试过以下操作，但无法达到预期效果。

 < table class =student_table> 
< tr> 
< th class =class_boxcolspan =4> Batch 2012< / th> 
< / tr> 
< tr class =batch_header> 
< td> Hi< / td> <！ - 必须将此中心 - > 
< td> Hi< / td> 
< td> Hi< / td> 
< td> Hi< / td> 
< / tr> 
 
 .batch_header {
 width：140px; 
 float：left; 
} 
 .batch_header td {
 width：30px; 
 height：25px; 
 background-color：#EEE; 
 margin：0px; 
 padding：2.5px; 
 border：0px; 
 float：left; 
 font-weight：bold; 
 font-size：smaller; 
 text-align：center; 
 display：inline-block; 
 vertical-align：middle; <！ - 这不工作 - > 
} 
  

请帮助。

$ p

 
 $ p 
 
 
 
 
 
 
解决方案
 code> float：left; 
  

从

  .batch_header td {} 
  

  .batch_header {width：140px ; float：left;}。batch_header td {width：30px; height：25px; background-color：#EEE; margin：0px; padding：2.5px; border：0px; font-weight：bold; font-size：smaller; text-align：center; vertical-align：middle; <！ - 这不工作 - >}  

 < table class =student_tableborder = 1> < tr> < th class =class_boxcolspan =4> Batch 2012< / th> < / tr> < tr class =batch_header> < td> Hi< / td> <！ - 必须将此中心 - > < td> Hi< / td> < td> Hi< / td> < td> Hi< / td> < / tr>< / table>  

JSFiddle演示

注意：我已给边框到表用于可见性目的。

更新：

请参阅 Demo2此处

刚刚添加 line-height：1.9; 在CSS

中

I am trying to vertically center text inside my TDs.

I have tried the following but I'm unable to achieve desired results.

<table class="student_table">
    <tr>
        <th class="class_box" colspan="4">Batch 2012</th>
    </tr>
    <tr class="batch_header">
        <td> Hi </td> <!--Have to center this-->
        <td> Hi </td>
        <td> Hi </td>
        <td> Hi </td>
    </tr>

.batch_header{
    width: 140px;
    float: left;
}
.batch_header td{
    width:30px;
    height:25px;
    background-color:#EEE;
    margin:0px;
    padding:2.5px;
    border:0px;
    float:left;
    font-weight: bold;
    font-size: smaller;
    text-align:center;
    display: inline-block;
    vertical-align: middle; <!-- < This is not working-->
}

Please help.

Thanks.

解决方案

Just Remove

float:left;

from

.batch_header td{ }

.batch_header{
    width: 140px;
    float: left;
}
.batch_header td{
    width:30px;
    height:25px;
    background-color:#EEE;
    margin:0px;
    padding:2.5px;
    border:0px;
    font-weight: bold;
    font-size: smaller;
    text-align:center;    
    vertical-align: middle; <!-- < This is not working-->
}

<table class="student_table" border = 1>
    <tr>
        <th class="class_box" colspan="4">Batch 2012</th>
    </tr>
    <tr class="batch_header">
        <td> Hi </td> <!--Have to center this-->
        <td> Hi </td>
        <td> Hi </td>
        <td> Hi </td>
    </tr>
</table>

JSFiddle Demo

Note: I have given border to table for visibility purpose.

Update:

Please see Demo2 Here

Just Added line-height: 1.9; in CSS

这篇关于无法垂直对齐TD内的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！