Html CSS中表格td中的中心图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8603914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center image in table td in CSS
提问by Best
I've been trying to align an image to the center of the table td. It worked with setting margin-left to a specific value but it also increased the size of td too and that isn't exactly what I wanted
我一直在尝试将图像与表格 td 的中心对齐。它可以将 margin-left 设置为特定值，但它也增加了 td 的大小，这并不是我想要的
Is there any efficient ways of doing this? I used percentages for the height and witdh of the table.
有没有什么有效的方法可以做到这一点？我使用百分比表示表格的高度和宽度。
回答by Scott
<td align="center">
or via css, which is the preferred method any more...
或通过 css，这不再是首选方法...
<td style="text-align: center;">
回答by Mohammed Gadiwala
Simple way to do it for html5 in css:
在 css 中为 html5 执行此操作的简单方法：
td img{
display: block;
margin-left: auto;
margin-right: auto;
}
Worked for me perfectly.
完美地为我工作。
回答by Top Systems
Center a div inside td using margin, the trick is to make the div width same as image width.
使用边距在 td 内居中一个 div，诀窍是使 div 宽度与图像宽度相同。
<td>
<div style="margin: 0 auto; width: 130px">
<img src="me.jpg" alt="me" style="width: 130px" />
</div>
</td>
回答by oqx
<table style="width:100%;">
<tbody ><tr><td align="center">
<img src="axe.JPG" />
</td>
</tr>
</tbody>
</table>
or
或者
td
{
text-align:center;
}
in the CSS file
在 CSS 文件中
回答by Kheteswar
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>
回答by Michiel
Set a fixed with of your image in your css and add an auto-margin/padding on the image to...
在你的 css 中设置一个固定的图像并auto在图像上添加一个-margin/padding 到...
div.image img {
width: 100px;
margin: auto;
}
Or set the text-alignto center...
或者设置text-align为居中...
td {
text-align: center;
}
回答by aulianza
td image
{
display: block;
margin-left: auto;
margin-right: auto;
}
回答by Kheteswar
As per my analysis and search on the internet also, I could not found a way to centre the image vertically centred using <div>it was possible only using <table>because table provides the following property:
根据我在互联网上的分析和搜索，我也找不到一种方法来垂直居中使用<div>它，<table>因为 table 提供了以下属性，因此只能使用它：
valign="middle"
