10

画像を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 この興味深いタスクはここでフォローされています

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、IE6/7にのみ適用されます。必要に応じて、条件付きIEスタイルシートに移動するか、完全に削除することができます。現在比較的配置されている子がオーバーフローしないようにする必要があります。.outer**

于 2011-02-10T14:47:39.410 に答える