在表格内显示块

Question

图像通常在它们之下有一个间隙。为了避免这种情况，我给他们display:block，但如果我在表格中这样做，图像就会向左移动。

如何将图像放在中央并且下方没有间隙？

（我使用内联CSS，因为我在邮件中使用它）

我可以在这里玩：https://jsfiddle.net/rc6jzvx2/

<table style="margin:0 auto; width:80%;">
<tr>
    <td style="background-color:gray">
    <img style="display:block; margin:0; padding:0; text-align:center;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
    </td>
</table>

Answer 1

您可以使用margin:0 auto代替text-align来使图像居中。它适用于display:block：

<table style="margin:0 auto; width:80%;">
<tr>
    <td style="background-color:gray">
    <img style="display:block; margin:0; padding:0; margin:0 auto;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
    </td>
</tr>
</table>

Answer 2

您可以通过将图像的垂直对齐属性设置为顶部并将文本对齐设置为表格单元格的中心而不是图像来消除图像下方的间隙并使其居中：

＆＃13;

＆＃13;

cudaEventRecord()

＆＃13;

table {
  margin: 0 auto;
  width: 80%;
}
td {
  background-color: gray;
  text-align: center;
}
img {
  vertical-align: top;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

<table style="margin:0 auto; width:80%;">
<tr>
    <table style="margin:0 auto; width:80%;">
<tr>
    <td >
<div style="background-color:gray;text-align:center">
    <img style="" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</div>
    </td>
</table>

</table>

Answer 4

修改

如果您将其用于邮件，正如我刚才所读，那么可以使用内联样式。

<强> SOLUTION：

您可以在图片中使用<div id="detailBullets" class="feature" data-feature-name="detailBullets"> <div id="detailBulletsWrapper_feature_div" data-feature-name="detailBullets" data-template-name="detailBullets" class="a-section a-spacing-none feature"> <div id="detailBullets_feature_div"> 和display: block，使其以容器为中心。

您可以创建一个类，以后可以在不同图像需要相同样式时继续使用该类：

margin: 0 auto;

此外，我建议您删除内联样式并将其添加到外部css文件中，以分离关注点和可重用性。

JSFIDDLE

CODE SNIPPET

＆＃13;

＆＃13;

.img-center {
  display: block;
  margin: 0 auto;
}

＆＃13;

.my-table {
  margin: 0 auto;
  width: 80%;
}
.img-center {
  display: block;
  margin: 0 auto;
}
.bg-gray {
  background-color: gray;
}

＆＃13;

＆＃13;

＆＃13;