0

に 3 つの画像があり<div>ます。画像を互いに重ね合わせ (不透明度を使用したスライドショーの場合)、Web サイトの中心に置いておきたいと考えています。

画像をオーバーレイするには、位置を絶対 ( position: absolute;) に設定します。ただし、これは私の画像を集中管理する方法と矛盾します。画像を中央に配置するために、画像に次のプロパティを指定します。margin: 0 auto; display: block;画像の位置が絶対位置に設定されている場合、これは機能しません。画像をオーバーレイおよび/または集中化するために使用できる他の方法は何ですか?

<div>
<img  id="SlideShow1" src="Images\image1.jpg" width="512" height="512">
<img  id="SlideShow2" src="Images\image2.png" width="512" height="512">
<img  id="SlideShow3" src="Images\image3.jpg" width="512" height="512">
</div>


img {
position: absolute;
   margin: 0 auto;
    display: block;
}
4

3 に答える 3

1

もう 1 つのオプションは、CSS3 を使用することtransformです。

img{
  display:block;
  position:absolute;
  left:50%;
  transform:translate(-50%,0);
}

必要に応じてベンダー プレフィックスを追加します。

これは、 Center a image with CSS (horizo​​ntal and vertical)という質問の下の回答でも言及されています。

于 2015-08-07T18:15:52.077 に答える