Html 在 <td></td> 中间对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8896355/
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
Align an image in the middle of <td></td>
提问by Nikola Nastevski
I have the following code:
我有以下代码：
<td>
<img src="some_image_url.png" class="png" />
<img src="another_image_url.jpg" />
</td>
The .css for the class="png"is:
class="png"的 .css是：
.png {
position:absolute;
}
How can I make the Sold Out image to be shown in the middle, as the other image is aligned?
当另一个图像对齐时，如何使售罄图像显示在中间？
Thanks.
谢谢。
EDIT:Here's the .css for the td:
编辑：这是td的 .css ：
.something td {
padding: 7px;
width: 20%;
text-align: center;
vertical-align: top;
}
采纳答案by A.B.Cade
try it like this:
像这样尝试：
td
{
position: relative; /* if it's IE */
/* position: fixed; if it's mozila */
}
.png , .jpg
{
position:absolute;
left:50%;
top:50%;
}
.png
{
margin-top: <put here half of the height of png>
margin-left: <put here half of the width of png>
}
add a class jpg to the jpg image
将类 jpg 添加到 jpg 图像
UPDATE:I edited it again, this works for me ...
make sure that your td is big enough
更新：我再次编辑它，这对我有用......
确保你的 td 足够大
回答by Bilal Kathrada
Set the table's text-align to center
将表格的文本对齐设置为居中
回答by Ricardo Casta?eda
sorry for not answering earlier, I have a solution: (I don't have enought time, later I'll improve my answer)
抱歉没有早点回答，我有一个解决方案：（我没有足够的时间，稍后我会改进我的答案）
The absoluted images aren't in the same flow as the default inline images, but you still can use 'text-align:center'
绝对图像与默认内嵌图像不在同一流中，但您仍然可以使用“text-align:center”
Just do the opposite, instead of putting the display absolute to the class="png", give it position:relative... And now give position absolute to the img of the bottom:
做相反的事情，而不是将绝对显示放在 class="png" 上，而是给它 position:relative ... 现在给底部的 img 提供绝对位置：
<style type="text/css">
.png {position:relative; z-index:10}
.bottom {position:absolute; z-index:0; left:0; top:0 }
</style>
<table>
<tr>
<td style=" text-align:center">
<img src="some_image_url.png" class="png" />
<img src="another_image_url.jpg" class="bottom" />
</td>
</tr>
</table>
This way you'll have an automatic centered image on the top of another. Don't forget that if you use position:absolute; you MUST set a top or bottom; or a left or right. In browsers like IE if you don't specify at least top with left, it will render in the IE way (broken).
这样，您将在另一个图像的顶部自动居中。不要忘记，如果你使用 position:absolute; 您必须设置顶部或底部；或左或右。在像 IE 这样的浏览器中，如果您没有指定至少 top 和 left，它将以 IE 方式呈现（损坏）。
(in my browser it is working I don't know why the fiddle doesn't show it the way I want, please test it and tell me if it is okay)
（在我的浏览器中它正在工作，我不知道为什么小提琴没有按照我想要的方式显示，请测试它并告诉我是否可以）
By the way, adding a div as you did is the best solution IMO.
顺便说一句，像您一样添加 div 是 IMO 的最佳解决方案。
回答by olleh
Set the float property of the image to
将图像的浮动属性设置为
float: right;
