Question

我有这个例子：

.gg-slides {height: auto; overflow: hidden}
.gg-con {margin: 75px 0 80px; display: flex}
.gg-icon {background: rgba(0,0,0,.6); border-radius: 99px; color: #333;
    cursor: pointer; height: 126px; left: 50%; position: absolute; text-align: center; top: 50%; transition: all .5s ease; width: 126px; z-index: 3;}

<div class="gg-slides">
  <div class="gg-con">
    <span class="gg-slide"><img src="http://placehold.it/200x200" alt=""></span>
    <span class="gg-slide"><img src="http://placehold.it/200x200" alt="">
      <div class="gg-icon">
        <div class="gg-count">
          <span class="gg-total">10</span>
        </div>
      </div>
    </span>
    <span class="gg-slide"><img src="http://placehold.it/200x200" alt=""></span>
  </div>
</div>

基本上我希望.gg-icon水平和垂直显示在第二张图像的中间以获得所有屏幕分辨率。我无法用我当前的HTML结构来解决这个问题。

Answer 1

您可以使用定位：

进行此操作

<html><body>
<a href="http://somesite.com/page.php"> Click</a>
</body>
</html>

.gg-slides {height: auto; overflow: hidden}
.gg-con {margin: 75px 0 80px; display: flex}

.gg-icon {
  background: rgba(0,0,0,.6);
  border-radius: 50%;
  color: #333;
  cursor: pointer;
  height: 126px;
  /*left: 50%;*/
  /*position: absolute;*/
  text-align: center;
  /*top: 50%;*/
  transition: all .5s ease;
  width: 126px;
  z-index: 3;
}

/* added */

.gg-slide {
  position: relative;
}

.gg-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

达到此目标的另一种方法：https://jsfiddle.net/0yjwLras/43/

我刚刚移除了中央图像并放置了一个新的div，其下面有中央div，以及background-image

<div class="gg-slides">
  <div class="gg-con">
    <span class="gg-slide"><img src="http://avatarbox.net/avatars/img28/kitten_eyes_avatar_picture_75535.jpg" /></span>
    <span class="gg-slide"><div class="BUBU"><div class="gg-icon CENTRAL-BUBU"><div class="gg-count"><span class="gg-total">10</span></div></div></div></span>
    <span class="gg-slide"><img src="http://avatarbox.net/avatars/img28/kitten_eyes_avatar_picture_75535.jpg" /></span>
  </div>
</div>

CSS

.gg-slides {height: auto;overflow: hidden;}
.gg-con {margin:75px 0 80px;display:flex;}
.gg-icon {background-color: rgba(255,0,0,.6);border-radius: 50%;color: #333; cursor: pointer; width: 50px; height: 50px;text-align: center;transition: all .5s ease;z-index: 3;}

.BUBU {width: 100px; height: 100px; background-image: url('http://avatarbox.net/avatars/img28/kitten_eyes_avatar_picture_75535.jpg'); background-repeat: no-repeat; padding-top: 25px;}  
.CENTRAL-BUBU {margin-left: auto; margin-right: auto;}

图像行上的文字 - 响应

2 个答案: