Table 单元格内容:在 HTML 中将文本左上对齐,图像居中
Table cell content: align text top-left and image in the middle in HTML
我在 html 中有一个 table。
这个table的内容是文字和图片。我会将左上角的文本和中间的图像对齐(垂直对齐)。
我这样试过:
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{
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 是一个 fiddle
这应该可以带您到达目的地。
旁注:内联样式不是一个好的做法。
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>
你这样做是为了一封电子邮件吗?如果是这样,内联样式就可以了(虽然不能在所有电子邮件客户端中使用,所以有一个默认值。
如果电子邮件执行类似...
<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%;
}
我在 html 中有一个 table。 这个table的内容是文字和图片。我会将左上角的文本和中间的图像对齐(垂直对齐)。 我这样试过:
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{
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 是一个 fiddle
这应该可以带您到达目的地。
旁注:内联样式不是一个好的做法。
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>
你这样做是为了一封电子邮件吗?如果是这样,内联样式就可以了(虽然不能在所有电子邮件客户端中使用,所以有一个默认值。
如果电子邮件执行类似...
<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%;
}