CODEWITHSUNDEEP
htmlcss
user971741
user971741

Reputation:

Unable to vertically align text inside a TD

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-->
}

Upvotes: 0

Views: 670

Answers (3)

Kamikaza
Kamikaza

Reputation: 635

No CSS needed because you are using tables and tables own sometimes

Here is the table for you

<table width="200">
    <tr>
        <th colspan="4" align="center" valign="middle">Batch 2012</th>
    </tr>
    <tr>
        <td align="center" valign="middle"> Hi </td> 
        <td align="center" valign="middle"> Hi </td>
        <td align="center" valign="middle"> Hi </td>
        <td align="center" valign="middle"> Hi </td>
    </tr>
    </table>

Here is a demo for you

https://jsfiddle.net/1zhdLb55/1/

Upvotes: 0

Ganesh Salunkhe
Ganesh Salunkhe

Reputation: 598

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

Upvotes: 1

christopher fujino
christopher fujino

Reputation: 149

If you take out the display: inline-block; and float: left; lines, it will look the way you want.

Upvotes: 0

Related Questions