CODEWITHSUNDEEP
htmlcss
Saqib Ali
Saqib Ali

Reputation: 12585

How do I make text appear at the bottom of a <td> using CSS and <div>?

I'm trying to do something very simple here. I just want to make my text appear at the bottom of a table cell that it is in. But I want to do it in CSS, not in the html tag itself.

Why doesn't the code shown below work? In the example below, my Text appears in the middle of the cell, not at the bottom. Why?

<style type="text/css">
    .myClass2 {
        color:red;
        font-weight:bold;        
        font-style:italic;            
        vertical-align:text-bottom;        
        text-align: center;
    }
</style>

<table bgcolor="black" border="1">
    <tr>
        <td bgcolor="white" class="myClass1" width="300">        
            <div class="myClass2">            
                Why won't this align at the bottom?
            </div>                    
        </td>
        <td height="100" bgcolor="white">
               Something very tall here.
        </td>
    </tr>
</table>

Upvotes: 1

Views: 4577

Answers (5)

Sowmya
Sowmya

Reputation: 26969

Add tr td{vertical-align:bottom}

In your code you have given vertical-align to div not for td that is why it is not aligning.

DEMO

If you want to align only first cell text then add the below code

td:first-child {vertical-align:bottom}

DEMO 2

Using position values

 .myClass2 {
        color:red;
        font-weight:bold;        
        font-style:italic;            
        vertical-align:text-bottom;        
        text-align: center;
    background:green; 
    width:100%;
    position:absolute; 
    bottom:0
    }
tr td{position:relative}

DEMO 3

Upvotes: 3

Martin Ivanovich
Martin Ivanovich

Reputation: 164

I assume you already able to trigger the div to on or off. If you just need styling then you could use a code similar like this:

<style type="text/css">
.myClass1 td .myClass2 {
    color:red;
    font-weight:bold;        
    font-style:italic;            
    vertical-align:text-bottom;        
    text-align: center;
}
</style>

<table bgcolor="black" border="1" class="myClass1">
<tr>
    <td height="100" bgcolor="white" width="300">
           Something very tall here.
        <div class="myClass2">            
            Why won't this align at the bottom?
        </div>                    
    </td>
</tr>
</table>

Upvotes: 0

Sanober Malik
Sanober Malik

Reputation: 2805

Well i think you should use : 

<style type="text/css">
.myClass1 {
position:relative;
}
.myClass2 {
    color:red;
    font-weight:bold;        
    font-style:italic;  
    position:absolute;
    bottom:0;
    left:0;
    vertical-align:bottom;        
}
</style>

<table bgcolor="black" border="1">
<tr>
    <td bgcolor="white" class="myClass1" width="300">        
        <div class="myClass2">            
            Why won't this align at the bottom?
        </div>                    
    </td>
    <td height="100" bgcolor="white">
           Something very tall here.
    </td>
</tr>
</table>

Upvotes: 0

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

Use this

<style>
    .myClass2 {
            color:red;
            font-weight:bold;        
            font-style:italic;            
            vertical-align:bottom;        
            text-align: center;
        }
    </style>
    <table bgcolor="black" border="1">
        <tr>
            <td bgcolor="white" class="myClass2" width="300">        
                <div class="myClass2">            
                    Why won't this align at the bottom?
                </div>                    
            </td>
            <td class="myClass2" height="100" bgcolor="white">
                   Something very tall here.
            </td>
        </tr>
    </table>

Upvotes: 0

coder
coder

Reputation: 13248

You can align text by using vertical-align property

Upvotes: 0

Related Questions