CSS中表格td中的中心图像

【问题标题】：Center image in table td in CSSCSS中表格td中的中心图像
【发布时间】：2012-01-26 02:19:29
【问题描述】：

我一直在尝试将图像与表格 td 的中心对齐。它可以将 margin-left 设置为特定值，但它也增加了 td 的大小，这不是我想要的

有没有有效的方法来做到这一点？我使用百分比来表示表格的高度和宽度。

【问题讨论】：

相关问题：stackoverflow.com/questions/8639383/… 除了给父级（此处为 td）一种 text-align: center 样式外，您可能还必须给子级（此处为 img）一种 display: block 样式或显示：内联块

标签： html css

【解决方案1】：

使用margin 将td 中的一个div 居中，诀窍是使div 的宽度与图像宽度相同。

<td>
  <div style="margin: 0 auto; width: 130px">
    <img src="me.jpg" alt="me" style="width: 130px" />
  </div>
</td>

【讨论】：

@Saike 并非如此，<div>s 已从大多数电子邮件中删除，不被视为良好做法。

【解决方案2】：

另一个选项是使用<th> 而不是<td>。 <th> 默认居中； <td> 默认为左。

【讨论】：

我已经为您解决了这个问题，但以后只需在 HTML 元素的任一侧使用反引号 (`) 即可确保它们显示出来。

【解决方案3】：

td image 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

【讨论】：

很好的通用答案

【解决方案4】：

根据我在互联网上的分析和搜索，我找不到使用<div> 将图像垂直居中的方法，只能使用<table>，因为 table 提供以下属性：

valign="middle"

【讨论】：

不建议使用此建议，因为它在 HTML5 中不受支持。最好使用 CSS 样式或类，并将垂直对齐：中间应用于列或容器。

【解决方案5】：

<table style="width:100%;">
<tbody ><tr><td align="center">
<img src="axe.JPG" />
</td>
</tr>
</tbody>
</table>

或

td
{
    text-align:center;
}

在 CSS 文件中

【讨论】：

【解决方案6】：

在 css 中为 html5 执行此操作的简单方法：

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}

完美地为我工作。

【讨论】：

完美运行；无效，有效，但 HTML5 不支持
如果图像是内联元素，“text-align: center”方法似乎有效。如果你使用“display:block”来去除图像周围多余的边框像素，那么你需要使用这个。

【解决方案7】：

<td align="center">

或通过 css，这是首选方法...

<td style="text-align: center;">

【讨论】：

注意 OP... 使用 Scott 的第二个选项，因为 'align' 是 not supported in HTML5 前进
那么我们如何克服 HTML5 呢？
你没有克服 HTML5.. 你适应它。 @beardtwizzle .. 感谢您添加。
如果我也希望它从顶部居中怎么办
@SilentPro <td style="text-align: center; vertical-align: middle;">

【解决方案8】：

这为我解决了问题：

<style>
.super-centered {
    position:absolute; 
    width:100%;
    height:100%;
    text-align:center; 
    vertical-align:middle;
    z-index: 9999;
}
</style>

<table class="super-centered"><tr><td style="width:100%;height:100%;" align="center"     valign="middle" > 
<img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif">
</td></tr></table>

【讨论】：

这也解决了我的问题，但在图像标签中，而不是在表格或 td 标签中

【解决方案9】：

在你的css中设置你的图片的一个fixed with并在图片上添加一个auto-margin/padding到...

div.image img {
    width: 100px;
    margin: auto;
}

或者将text-align 设置为居中...

td {
    text-align: center;
}

【讨论】：