[英]Table cell content: align text top-left and image in the middle in HTML
我在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>
但是通过这种方式,我获得了所有在单元格左上角对齐的(文本和图像)。 有什么建议吗?
您是否正在为此发送电子邮件? 如果是这样,则可以使用内联样式(尽管并非在所有电子邮件客户端中都适用,所以请使用默认样式。
如果电子邮件做类似...
<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%;
}
这是一个简单的示例:
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>
这是一个小提琴
这应该使您到达想要的地方。
注意 :内联样式不是一个好习惯。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.