表格單元格內容：在HTML中將文本的左上角和中間對齊

Question

我在html中有一個表格。 該表的內容是文本和圖像。 我將在左上角對齊文本，在中間對齊圖像（垂直對齊）。 我以這種方式嘗試過：

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>

但是通過這種方式，我獲得了所有在單元格左上角對齊的（文本和圖像）。 有什么建議嗎？

Answer 1

您是否正在為此發送電子郵件？ 如果是這樣，則可以使用內聯樣式（盡管並非在所有電子郵件客戶端中都適用，所以請使用默認樣式。

如果電子郵件做類似...

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

它看起來很粗糙，但是某些瀏覽器和電子郵件客戶端將忽略“ height =”。 這純粹是Ive從多年的電子郵件模板中發現的。

如果沒有通過電子郵件發送，請嘗試避免使用表格-但是，如果您無法通過電子郵件發送，則嘗試...

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

Answer 2

這是一個簡單的示例：

 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> 

這是一個小提琴

這應該使您到達想要的地方。

注意 ：內聯樣式不是一個好習慣。

Answer 3

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>