0

私は自分のイメージに少し問題がありました。実際にはjqueryのスライドショーです。画像の位置が絶対的なので、中央に配置するのが難しくなっています...

これは私のために働いた

 #slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    width:100%;
    text-align:center;
}

ただし、幅が 100% の場合、画像は div の 100% になります。一部の画像は他の画像よりも薄く、それらを中央に配置したいだけです。幅を 100% にすると、薄いイメージが引き伸ばされます。

ここにHTMLがあります

<div class="contentImages">

<div id="slideshow">

<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />

<img src="upload/<?php echo $array['image2'] ?>" height="200" />

<img src="upload/<?php echo $array['image3'] ?>" height="200" />

</div></div>

そして残りのCSS

#slideshow {
    position:relative;
    height:200px;
    overflow:hidden;
    float:left;
    width:250px;
}

.contentImages{
    border:1px solid #CCC; 
    padding:10px; 
    margin:20px auto 0; 
    position:relative;
    width:750px; 
    overflow:hidden;
}

text-align をスライドショー div に適用しようとしましたが、それは何もしませんでした。また、スライドショー div を絶対位置に設定し、中央にテキストを配置しようとしましたが、それはしませんでした ( 100% または 250px の幅;) 動作しますが、画像の 10% を表示するだけで、中央に配置されていませんでした。

簡単に言えば、薄い画像を引き延ばさずに画像を中央に配置するにはどうすればよいですか?

これが理にかなっていることを願っています。

ありがとう。

- - 追加した - - -

このコードを使用してjQueryルートを試してみました

$(window).bind('load', function() {  
    var img_width = $("#slideshow img").width();
    $("#slideshow img").css("width", img_width);
    alert(img_width);
});

ただし、アラートはすべてのイメージに対して 255 を返します。薄いイメージも含まれます。

CSSも調整しました

#slideshow IMG {
    position:absolute;
    top:0;
    z-index:8;
    opacity:0.0;
    text-align:center;
}
4

2 に答える 2

1

試す

#slideshow img{
    ...
    left: 50%;
    margin-left: -/*half the width of the image in pixels*/; (-85px)
    ...
}
于 2012-04-04T17:23:49.703 に答える
0

ジョーの答えはトリックですが、ブラウザの画面が画像の幅よりも小さい場合は機能しないため、これを使用する必要があります: http://d-graff.de/fricca/center.html

アブソリュートでセンタリングを解決するコツです。Joe のテクニックを使用していますが、少し改善されています。

コメントに答えるために編集：

次のように使用します。

<div id="distance"></div>
<img src="img/some-img.png" alt="some alt">

また、Web サイトのブロンコードで CSS (コメント付き) を見つけることができます。

于 2012-04-04T17:29:53.107 に答える