Question

我在div（img）中有一个class="top_image"，我希望这张图片正好位于div的中间，但我尝试的却没有...

感谢您的帮助！

Answer 1

此处发布的每个解决方案均假设您知道img，的维度，这不是常见情况。 此外，将维度植入解决方案中很痛苦。

只需设置：

/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;

或

/* for the img inside your div */
display: block;
margin: 0 auto;

就是这样。

请注意，您还必须为外部min-width设置初始div。

Answer 2

text-align：center仅适用于水平居中。要使它处于完整的中心，垂直和水平，您可以执行以下操作：

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];
}

Answer 3

W3C提供了一个非常简单和优雅的解决方案。只需使用margin：0 auto声明如下：

.top_image img { margin:0 auto; }

更多信息和W3C的examples。

Answer 4

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

Answer 5

我认为最好为div做文本对齐中心，让图像处理高度。只需指定div的顶部和底部填充，即可在图像和div之间留出空间。请看这个例子：http://jsfiddle.net/Tv9mG/

Answer 6

我希望这会有所帮助：

.top_image img{
display: block;
margin: 0 auto;
}

Answer 7

这让我花了太长时间才弄明白。我不敢相信没人提到中心标签。

例如：

<center><img src = "yourimage.png"/></center>

如果您想将图片大小调整为百分比：

<center><img src = "yourimage.png" width = "75%"/></center>

GG America

div水平居中图像

7 个答案: