Question

我想将图像置于div中。 div的固定宽度为300px。图像宽度仅在运行时才知道。它通常大于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 这个有趣的任务是 here

Answer 1

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

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

background-image: url(url);
background-position: center top;

Answer 2

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

<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样式表，或者完全删除*。这需要避免现在相对定位的孩子溢出。

Answer 3

将图像置于html页面的中心位置：

<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" alt="image"/>
</p>

Answer 4

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

div { position: relative; } 
img { position: absolute; left: 50%; transform: translateX(-50%); }

使用CSS </div>在<div>中居中<img/>

4 个答案: