表格单元格内容：在 HTML 中将文本左上角和图像居中对齐答案

【问题标题】：Table cell content: align text top-left and image in the middle in HTML表格单元格内容：在 HTML 中将文本左上角和图像居中对齐
【发布时间】：2015-10-21 13:15:33
【问题描述】：

我有一个 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>

但是通过这种方式，我获得了在单元格左上角对齐的所有（文本和图像）。有什么建议吗？

【问题讨论】：

标签： html css alignment vertical-alignment text-alignment

【解决方案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=”。这纯粹是我从多年的电子邮件模板中发现的。

如果不是电子邮件，请尽量避免使用表格 - 但如果您不能，请尝试类似...

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

【讨论】：

是的，你是对的！这是一个电子邮件模板！我发现在 Outlook 中我获得了正确的行为，但在 IE 中却没有。非常感谢！很有帮助！
不用担心，电子邮件模板可能会很痛苦。如果您发现任何其他错误，请告诉我，我可以更新我的答案。还要确保将应用于您想要具有白色背景的单元格，否则某些版本的 Outlook 会做一些很棒的事情。您还可以使用 gmail 应用主题，这些主题提供不透明背景等内容
很明显您在使用电子邮件模板时遇到了很多麻烦哈哈谢谢！

【解决方案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>

Here 是个小提琴

这应该可以让你到达你想要的地方。

旁注：内联样式不是一个好习惯。

【讨论】：

您好，谢谢您的回答，但我无法为元素设置固定高度。我只会将图像定位在单元格的中心。这就像图像的垂直对齐不起作用......
我已经更新了我的答案和链接，只需从 CSS 中排 (height:200px) 即可，它应该可以按您的意愿工作。