10

我想在 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">

div{width: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这里 关注这个有趣的任务

4

4 回答 4

13

给予div text-align: center应该工作。（不过，您可能必须将其添加align='center'为属性才能在 IE6 中工作。）注意：正如@streetpc 所指出的，如果图像比容器宽，此方法将无法正常工作。

或者，您也可以将图像作为背景图像：

background-image: url(url);
background-position: center top;
于 2011-02-10T14:36:19.617 回答
12

如果您在图像周围包裹另一个元素，则可以使其工作：

<div class="outer">
    <div class="inner"><img src="" alt="" /></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%;
}

上position: relative标.outer有 ，*所以它只适用于 IE6/7。如果这是您喜欢的，您可以将其移动到有条件的 IE 样式表，或者*完全删除。需要避免现在相对定位的孩子溢出。

于 2011-02-10T14:47:39.410 回答
2

要将图像居中在 html 页面的中心：

<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" alt="image"/>
</p>
于 2013-09-05T08:12:05.043 回答
2

您可以使用 CSS 转换来定位元素：

div { position: relative; } 
img { position: absolute; left: 50%; transform: translateX(-50%); }
于 2017-07-10T21:01:16.197 回答