使用 CSS 在 <DIV> 中居中 <IMG/>
Posted
技术标签:
【中文标题】使用 CSS 在 <DIV> 中居中 <IMG/>【英文标题】：center <IMG/> inside a <DIV> with CSS 【发布时间】：2011-06-24 21:49:31 【问题描述】：我想在一个 div 中居中图像。 div 的宽度固定为 300 像素。图像宽度仅在运行时已知。它通常大于 300px，因此图像应该居中并左右切割。在这种情况下，margin 0 auto 不起作用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
divwidth:300px;border:1px solid red; overflow:hidden
img
/* NOTE!!!!
margin:auto; doesn't work when image width is bigger than div width
image width is known only at runtime!!!
*/
</style>
</head>
<body>
<div>
<img src="" />
</div>
</body>
</html>
感谢任何 CSS 想法
UPD 关注这个有趣的任务here
【问题讨论】：
【参考方案1】：提供div text-align: center 应该可以。 （不过，您可能需要添加 align='center' 作为属性才能使其在 IE6 中运行。）注意：正如 @streetpc 所指出的，如果图像宽度大于容器。
或者，您也可以将图像作为背景图像：
background-image: url(url);
background-position: center top;
【讨论】：
如果你的 div 有text-align: center，检查img 有display: inline（或inline-block），但图像只会向右裁剪。
@streetpc 你是对的，如果图像比容器宽，它不会以第一种方法居中。背景图像确实是最好的方法（或者，一个具有巨大固定宽度的内部 div - 但那很hacky）
考虑到背景图像可能无法打印，无法在运行时以通用方式替换，爬虫可能无法获取它（例如，谷歌图像），您可以使用max-width 限制图片大小。
@Gonzalo 除了最后一个 IMO 之外的所有优点 - max-width 将调整图像的大小，我认为这不是 OP 的意图。【参考方案2】：
如果你在图像周围包裹另一个元素，你可以让它工作：
<div class="outer">
<div class="inner"><img src="" /></div>
</div>
还有以下 CSS：
.outer
width: 300px;
border: 1px solid red;
overflow: hidden;
*position: relative;
.inner
float: left;
position: relative;
left: 50%;
img
display: block;
position: relative;
left: -50%;
.outer 上的position: relative 标有*，因此它仅适用于 IE6/7。如果您愿意，可以将其移至条件 IE 样式表，或者完全删除 *。需要避免现在相对定位的children溢出。
【讨论】：
你的方法有效！你有什么疯狂的想法在（裁剪或不裁剪）图像周围制作边框吗？不是外边框，不是图像边框，而是图像可见部分的边框？我的智商太低，做不到……【参考方案3】：将图像置于 html 页面的中心：
<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" />
</p>
【讨论】：
【参考方案4】：您可以使用 CSS 转换来定位元素：
div position: relative;
img position: absolute; left: 50%; transform: translateX(-50%);
【讨论】：
以上是关于使用 CSS 在 <DIV> 中居中 <IMG/>的主要内容，如果未能解决你的问题，请参考以下文章