Question

如何将play.png图像放在bootsrap中的另一个图像上？水平和垂直中心。

我的代码：

echo '<div class="sidebar_youtube_box">';
        echo '<a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'">
            <img src="'.$host.'/images/youtube/'.$vid['sidebar_video_thumb'].'" class="img-responsive">
            <img src="'.$host.'/images/assets/play.png" class="img-responsive play_png">

        </a>';
        echo '</div>';

Answer 1

你可以这样做。

＆＃13;

.wrapper {
  position: relative;
  width: fit-content;
  height: fit-content;
}

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
}

＆＃13;

<div class="wrapper">
  <img class="play" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Play-rounded-button-outline.svg/500px-Play-rounded-button-outline.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Pexels-photo-126407.jpg/320px-Pexels-photo-126407.jpg">
</div>

＆＃13;

Answer 2

将图片position: absolute;及其父图片设为position:relative;。然后，图像将相对于父母定位。使用top，left和transform完成定位。您还可以使用z-index将其中一个置于另一个之上。见下文并希望它有所帮助。

HTML：

<div class="sidebar_youtube_box">
    <a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'">
    <img src="'.$host.'/images/youtube/'.$vid['sidebar_video_thumb'].'" class="img-responsive img-stack">
    <img src="'.$host.'/images/assets/play.png" class="img-responsive img-stack play_png">  </a>
</div>

CSS：

.sidebar_youtube_box{
  position:relative;
}
.img-stack{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  z-index:1;
}
.play_png{
  z-index:2;
}

在引导程序中将图像放在另一个图像上

2 个答案: