Question

想问一下我一直在尝试的这种情况的潜在方法。我有一个包含两个图像的图库容器，这些图像占用了容器可用宽度的50％。

目标是使徽标居中（在两个图像之间有缝隙）居中，并使其具有移动响应能力。

我要牢记的是：使用Z-Index将徽标堆叠在两个图像的中间，但是不幸的是，到目前为止，我一直没有看到太多的用法。

#container {
  position: relative:
  max-width: 1700px;
  margin: 0 auto;
  text-align: center;
}

.box {
  max-width: 500px;
  width: 90%;
  margin: 0 auto;
  display: block;
}

@media (min-width: 980px) {
  .box {
    width: 50%;
    padding: 0px 15px;
    box-sizing: border-box;
    float: left;
  }
}

<div id="container">
  <img src="images/picture01.png" class="box">
  <img src="images/logo-center.png" class="box">
  <img src="images/picture02.png" class="box">
</div>

Answer 1

使用float:left和position:absolute作为徽标。像这样的东西：

<div id="container">
  <img style="width: 50%; float:left" src="https://static.bhphoto.com/images/images500x500/LEE_Filters_115R_Peacock_Blue_Color_Effect_1272910523000_688218.jpg" class="box">
  
  <img style="position:absolute;margin-left: auto; margin-right: auto;left: 0;right: 0;" src="https://s2.coinmarketcap.com/static/img/coins/200x200/2076.png" class="box">
  
  <img style="width: 50%;" src="https://static.bhphoto.com/images/images500x500/LEE_Filters_115R_Peacock_Blue_Color_Effect_1272910523000_688218.jpg" class="box">
</div>

图像之间的CSS堆叠徽标

1 个答案: