Dan*_*Dan 10 html css centering
我想将图像置于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 这个有趣的任务之后这里
Pek*_*ica 13
给人div text-align: center应该工作.(但是,您可能必须添加它align='center'作为属性才能在IE6中工作.)注意:正如@streetpc所指出的,如果图像比容器宽,则此方法将无法正常工作.
或者,您也可以将图像作为背景图像:
background-image: url(url);
background-position: center top;
mer*_*tor 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样式表(如果这是您喜欢的样式),或者*完全删除它.需要避免现在相对定位的孩子溢出.