在div中水平居中图像
在div中水平居中图像
提问于 2012-04-03 00:58:03
我在div (class="top_image")中有一个img，我希望这个图像正好在div的中间，但我尝试的都不起作用……
谢谢你的帮助！
回答 6
Stack Overflow用户
发布于 2012-04-03 01:02:20
文本对齐:居中仅适用于水平居中。要使其处于完整的中心、垂直和水平，您可以执行以下操作：
div
{
position: relative;
}
div img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}Stack Overflow用户
发布于 2013-04-09 17:55:11
Stack Overflow用户
发布于 2013-02-08 13:50:19
<div class="outer">
<div class="inner">
<img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
</div>
</div>
<hr />
<div class="outer">
<div class="inner">
<img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
</div>
</div>CSS
img
{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto auto;
}
.outer
{
border: 1px solid #888;
width: 100px;
height: 100px;
}
.inner
{
display:table-cell;
height: 100px;
width: 100px;
vertical-align: middle;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9980531
复制相关文章
相似问题