Question

我试图创建一个旋转木马。但是我在窗口调整大小时遇到了V形问题。它们开始向上流动，并隐藏在图像后面。虽然div.image-preview可能看起来很奇怪，但我需要它，因为我可能有视频或其他类型的元素，我想根据它的类型更改内部div元素。

这是我迄今为止所做的工作 -

＆＃13;

.modal {
  display: block;
  position: fixed;
  z-index: 20;
  padding-top: 150px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}


.modal .full-media {
  position: fixed;
  left: 30%;
  /* bottom: 55%; */
  
} 

.modal .full-media .image-preview {
  padding-bottom: 0;
  margin-right: 6%;    
}

.modal .full-media .image-preview img {
  width: 700px;
  height: 700px;
}

i.next-slide {
  font-size: 54px;
  color: #FFFFFF;
  margin-left: 100px;
  float: left;
  margin-top: 15%;
}

i.prev-slide {
  font-size: 54px;
  color: #FFFFFF;
  margin-right: 100px;
  float: right;
  margin-top: 15%;
}

i:hover {
  cursor: pointer;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</head>
<body>
  <div class="modal">
    <i class="material-icons next-slide" (click)="prevSlide()">chevron_left</i>
    <div class="full-media">
      <div class="image-preview">
        <img src="http://www.w3schools.com/howto/img_fjords.jpg" />
      </div>
    </div>
    <i class="material-icons prev-slide" (click)="nextSlide()">chevron_right</i>
  </div>
</body>
</html>

＆＃13;

这就是我现在所拥有的 -

Answer 1

一个很好的解决方案是使箭头容器绝对，并调整顶部，底部，边距和高度，使其垂直居中，如下所示：

i.next-slide {
  font-size: 54px;
  color: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100px;
  margin: auto;
  height: 54px;
}

i.prev-slide {
  font-size: 54px;
  color: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100px;
  margin: auto;
  height: 54px;
}

请注意，可以在公共类中指定重复的属性。

＆＃13;

.modal {
  display: block;
  position: fixed;
  z-index: 20;
  padding-top: 150px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}


.modal .full-media {
  position: fixed;
  left: 30%;
  /* bottom: 55%; */
  
} 

.modal .full-media .image-preview {
  padding-bottom: 0;
  margin-right: 6%;    
}

.modal .full-media .image-preview img {
  width: 700px;
  height: 700px;
}
i.next-slide {
  font-size: 54px;
  color: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100px;
  margin: auto;
  height: 54px;
}

i.prev-slide {
  font-size: 54px;
  color: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100px;
  margin: auto;
  height: 54px;
}

i:hover {
  cursor: pointer;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</head>
<body>
  <div class="modal">
    <i class="material-icons next-slide" (click)="prevSlide()">chevron_left</i>
    <div class="full-media">
      <div class="image-preview">
        <img src="http://www.w3schools.com/howto/img_fjords.jpg" />
      </div>
    </div>
    <i class="material-icons prev-slide" (click)="nextSlide()">chevron_right</i>
  </div>
</body>
</html>

＆＃13;

流动在尺寸里面的模型的Css转盘箭头

1 个答案: