Tabellenzellen-Inhalt: richten Sie den text Links-oben und Bild in der Mitte in HTML

Ich habe eine Tabelle in html.
Der Inhalt dieser Tabelle ist text und ein Bild. Ich würde das ausrichten der text in der linken oberen Ecke und das Bild in der Mitte (vertical-align).
Ich habe versucht, in dieser Weise:

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>

Aber ich auf diese Weise erhalten alle (text und Bild), ausgerichtet in der oberen linken Ecke der Zelle.
Jede Anregung?

InformationsquelleAutor sharkbait | 2015-07-30

2

Machen Sie diese für eine E-Mail? Wenn dem so ist inline-styling ist in Ordnung (obwohl nicht in allen E-Mail-clients so ein Standard.

Wenn die E-Mail etwas zu tun...
```
<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>
```
Es sieht grob, aber einige Browser und E-Mail-clients ignorieren 'height='. Dies ist rein, was Ich fand von den Jahren des E-Mail templates.

Wenn keine E-Mails, versuchen zu vermeiden und Tabellen - aber wenn Sie nicht können, dann versuchen Sie so etwas wie...
```
<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/
- Ja, du hast Recht! Es ist ein E-Mail-Vorlage! Und ich fand, dass in Outlook habe ich mir erhalten, das richtige Verhalten, aber im IE nicht. Ich danke Ihnen sehr! Sehr hilfreich!!!
- Keine Sorge, die E-Mail-templates können ein Schmerz sein. Wenn Sie feststellen, andere Fehler lassen Sie mich wissen, und ich kann das update meiner Antwort. Auch sicher sein, bewerben <td bgcolor="#FFFFFF"> zu den Zellen, die Sie wollen, um einen weißen hintergrund, wie einige Versionen von outlook wird wunderbare Dinge zu tun sonst. Auch gmail, die Sie anwenden können Themen, die geben Dinge wie undurchsichtigen Hintergründe
- Es ist klar, Sie hatte viele Probleme mit E-Mail-Vorlage haha danke dir!!!
InformationsquelleAutor Tony Ray Tansley

Hier ist ein einfaches Beispiel:

CSS:

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

HTML:

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

Hier ist ein Turnschuh

Dies sollte erhalten Sie, wo Sie wollen.

Seite Hinweis: inline-styling ist nicht eine gute Praxis.

Hi, danke für die Antwort, aber ich kann nicht eine Feste Höhe für den <tr> - element. Ich nur würde sich das Bild in der Mitte der Zelle. Es ist so etwas wie das vertical-align dem Bild nicht funktionieren...
Ich aktualisiert meine Antwort und link, nur die Zeile (Höhe:200px) von CSS und es sollte so funktionieren, wie Sie es wollen.

InformationsquelleAutor EaziLuizi

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>

InformationsquelleAutor Anubhav pun

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.