CODEWITHSUNDEEP
htmlcssalignmentvertical-alignmenttext-alignment
sharkbait
sharkbait

Reputation: 3040

Table cell content: align text top-left and image in the middle in HTML

I have a table in html. The content of this table is text and an image. I would align the text in the top-left corner and the image in the middle (vertical-align). I tried in this way:

CSS:

table td {border-collapse: collapse;}
#tabella {border: 1px solid black; text-align: left; vertical-align: top;}
#variante {vertical-align: middle;}

HTML:

<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text
<br>
<img id="variante" width="75" border="0" src="www.favetta.com/image.png">
</td>

But in this way I obtain all (text and image) aligned in the top-left corner of the cell. Any suggestion?

Upvotes: 1

Views: 12062

Answers (3)

Tony Ray Tansley
Tony Ray Tansley

Reputation: 669

Are you doing this for an email? If so inline styling is fine (although won't work in all email clients so have a default.

If email do something like...

<table>
    <tr>
        <td align="center">
             <table width="100%">
                  <tr>
                        <td align="left">This is text</td>
                  </tr>
             </table>
             <br/><br/>
             <img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
             <br/><br/><br/><br/>
        </td>
    </tr>    
<table>

It looks crude but some browsers and email clients will ignore 'height='. This is purely what Ive found from years of email templating.

If not email, try and avoid tables - but if you can't then try something like...

<table>
    <tr>
        <td class="content">
            This is text
            <img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
        </td>
    </tr>    
<table>

css

table{
    border:1px solid grey;
    width:100%;
}
.content{
    text-align:left;
}
.content img{
    width:75px;
    vertical-align:middle;
    transform: translate(-50%, -50%);
    margin: 100px 50% 50px 50%; 
}

https://jsfiddle.net/qbss1f0t/

Upvotes: 2

Anubhav pun
Anubhav pun

Reputation: 1323

Use this may help you   

<table width="100%">
        <tr>
        <td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text</td>
        <td><img id="variante" width="75" border="0" src="www.favetta.com/image.png"></td>

        </tr>    
    <table>

Upvotes: 0

EaziLuizi
EaziLuizi

Reputation: 1615

Here is a simple example:

table{
    border:1px solid #000;    
}

table tr{
    height:200px;
}

table td{
    width:200px;
    text-align:center;
}

.textNode{
    text-align:left;
    padding:0;
    margin:0;
    vertical-align:top;
}

.imgNode img{
    width:75px;    
    margin: auto;
}
<table>
    <tr>
        <td class="textNode">This is text</td>
        <td class="imgNode"><img src="http://s27.postimg.org/fs9k8zewj/cow1.png"></td>
    </tr>    
<table>

Here is a fiddle

This should get you to where you want.

Side Note: inline styling is not a good practice.

Upvotes: 0

Related Questions