在 div 中水平居中图像[重复]答案

【问题标题】：Center image in div horizontally [duplicate]在 div 中水平居中图像[重复]
【发布时间】：2012-04-16 08:31:56
【问题描述】：

我在 div (class="top_image") 中有一个 img，我希望这张图片正好位于 div 的中间，但我尝试的任何方法都不起作用...

感谢您的帮助！

【问题讨论】：

你应该同时指定垂直和水平。
div 和图像的尺寸总是已知的吗？图像会改变吗？

标签： html css

【解决方案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;

就是这样。

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

【讨论】：

完美答案：Bootstrap也使用了这个方案。
注意：这仅适用于图像的宽度小于父 div 的情况。
在相对定位的<div>内部有绝对定位图像的解决方案吗？
我找了很久了！！！
图片大于div时不起作用

【解决方案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];
}

【讨论】：

我想你的意思是[-50% of your image's width/height] :)
是的，对不起，我的错。打字有点快。谢谢。
如果您事先不知道图像大小的任何想法.. 我必须调整图像大小以显示在固定大小的容器中，但图像可能是宽的或高的.. .
对不起...想通了...在我的回答中查看解决方案..

【解决方案3】：

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

.top_image img { margin:0 auto; }

更多信息和来自 W3C 的examples。

【讨论】：

省了很多苦！

【解决方案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;
}

【讨论】：

【解决方案5】：

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

【讨论】：

图像损坏但效果很好

【解决方案6】：

我希望这会有所帮助：

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

【讨论】：

请告诉你你在这里做了什么。解释一下。

【解决方案7】：

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

例如：

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

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

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

GG美国

【讨论】：

中心标签现在已被弃用，并且非常不受欢迎，并且正在被删除，尽管它目前适用于大多数浏览器。
“GG 美国”。漂亮。
在 HTML5 中不受支持。改用 CSS。定义居中文本