在div中水平居中图片

Question

我有一个在div中的img （ class="top_image"），我想让这张图片正好居中于此div，但是我尝试过的方法都没有起作用...

感谢任何帮助！

- joschua011

---

你应该同时指定垂直和水平。 - Nick Rolando

div和图像的尺寸是否始终已知？图像是否会发生变化？ - j08691

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。

- Dyin

---

完美答案：这个解决方案也用于Bootstrap中。 - nietonfir

注意：只有当图片的宽度小于父级 div 时才有效。 - devius

在相对定位的<div>内部，是否有绝对定位图像的解决方案？ - DGibbs

如果图像比 div 更大，则无法正常工作。 - BbIKTOP

我的天啊！你解决了我的问题。非常感谢！！ - Daniel Jose Padilla Peña

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

- Maxime Fabre

---

我想你的意思是 [-50％的图像宽度/高度] :) - rgthree

嗯，抱歉，我打得有点快了。谢谢。 - Maxime Fabre

如果您不知道图像的大小，有什么想法吗？我必须将图像调整大小以在固定大小的容器中显示，但图像可能是宽或高... - Ads

抱歉...我已经想出来了...请查看我的答案中的解决方案。 - Ads

Answer 3

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

.top_image img { margin:0 auto; }

更多信息和从W3C获取的示例。

- Phil Thomas

---

省去了很多麻烦！ - JGCW

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

- Ads

Answer 5

我认为最好将div设为文字居中，让图片控制高度。只需为div指定上下内边距即可在图片和div之间留出空间。可以看看这个例子：http://jsfiddle.net/Tv9mG/

- Jay

---

图片损坏了，但功能很好。 - App Dev Guy

Answer 6

我希望这会有所帮助：

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

- Arasu Pandiyan

---

请告诉我您在这里做了什么。解释一下。 - Pratik Joshi

Answer 7

这让我花了太长时间才解决。我不敢相信没有人提到居中标签。

例如:

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

如果你想将图像按百分比调整大小：

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

GG 美国

- DisgruntledHuman

---

居中标签现在已经被弃用，并且非常不受欢迎，正在被逐步淘汰，尽管它目前在大多数浏览器中仍然可以使用。 - Peter Warrington

GG美国。太棒了。 - carefulnow1

<center>在HTML5中不支持。请改用CSS。 定义居中文本。 - Tahir