Unable to vertically align text inside a TD

Question

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

check this it is working : http://www.w3schools.com/css/tryit.asp?filename=trycss_table_vertical-align — Pranay Rana, Mar 05 '15 at 06:56

Ganesh Salunkhe · Accepted Answer · 2015-03-05T07:21:07.307

1

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

edited Mar 05 '15 at 07:21

answered Mar 05 '15 at 06:58

Ganesh Salunkhe

596
1
4
18

I need to do it with it `float:left;`. Without it i get some extra space around cells however all padding, margin, spacing is 0 but still. to solve this i have added float:left. I have added it for some layout requirements. Is there a way i can achieve my goal with this? – Maven Mar 05 '15 at 07:00
@Maven `table { border-collapse: collapse}` – Alexey Ten Mar 05 '15 at 07:07
tried `border-collapse: collapse` and `border-spacing: 0px;` still a space is there. – Maven Mar 05 '15 at 07:12

score 0 · Answer 2 · answered Mar 05 '15 at 07:04

0

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

answered Mar 05 '15 at 07:04

christopher fujino

149
1
4

yes it does. but after removing `float: left;` i get some extra space on the right of cells. Thats why i was using `float: left;`. Any idea what that space might be? – Maven Mar 05 '15 at 07:08
I'm not seeing any horizontal re-alignment in Chrome when I remove the float. What browser are you using? – christopher fujino Mar 05 '15 at 07:44

Kamikaza · Answer 3 · 2015-03-05T07:43:00.887

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/

Unable to vertically align text inside a TD

3 Answers3

Linked