在 CSS 中的 table td 中居中显示图像

我一直在尝试将图像对准桌子的中心。它与设置页边距一起工作-左到一个特定的值，但它也增加了 td 的大小，这并不是我想要的

有什么有效的方法吗? 我用百分比表示表的高度和宽度。

html
css

438632 次浏览

小开

最佳答案

<td align="center">

或者通过 css，这是首选的方法了..。

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

小开

设置一个固定与您的图像在您的 css 和添加一个 auto-边缘/填充图像到..。

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

Or set the text-align to center...

td {
text-align: center;
}

小开

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

或者

td
{
text-align:center;
}

in the CSS file

小开

This fixed issues for me:

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

小开

根据我的分析和在互联网上搜索也，我无法找到一种方法来中心的图像垂直中心使用 <div>它是可能的，只有使用 <table>，因为表提供了以下属性:

valign="middle"

小开

使用 margin将 div 置于 td的中心，诀窍是使 div的宽度与图像的宽度相同。

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

小开

用 css 实现 html5的简单方法:

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


}

这招对我很管用。

小开

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

小开

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