图像顶部的移动按钮

Question

我有两个按钮需要在图像上方移动。一个按钮应位于图像的右侧，另一按钮应位于左侧。但是，目前它们停留在图像的左下角，而它们应位于照片中间的不同侧面。我做错了吗？

HTML部分：

<div class="container">
              <img class="mySlides" src="images/dog1.jpg" style="width:100%">
              <img class="mySlides" src="images/dog2.jpg" style="width:100%">
              <img class="mySlides" src="images/dog3.jpg" style="width:100%">
              <img class="mySlides" src="images/dog4.jpg" style="width:100%">

              <button class="carousell-button carousell-button-black carousell-button-left" onclick="plusDivs(-1)">&#10094;</button>
              <button class="carousell-button carousell-button-black carousell-button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>

CSS部分：

.container carousell-button-right {
    position: relative;
    top: 200%px;
    right: 0%;
}
.container carousell-button-left {
    position: absolute;
    top: 100%;
    left: 0%;
}

现在看起来如何：

enter image description here

Answer 1

1. 因为您需要在中间使用它，然后将Relative用作父级，并对absolute也使用Right。这将确保根据图像大小将其绝对定位在中间。
2. 您还应该将.用于carousell类。
3. 如上所述，200%px;中的注释是无效的属性值。

body {
  margin: 0;
}

.container {
  position: relative;
}

.container .carousell-button-right {
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 30px;
}

.container .carousell-button-left {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 30px;
}

<div class="container">
  <img class="mySlides" src="http://placekitten.com/301/301" style="width:100%">
  <button class="carousell-button carousell-button-black carousell-button-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="carousell-button carousell-button-black carousell-button-right" onclick="plusDivs(1)">&#10095;</button>
</div>

Answer 2

查看下面的代码片段并尝试使用flex-box

div {
  width: 200px;
  height: 200px;
  background-color: black;
  
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

button {
  width: 50px;
  height: 20px;
}

<div>
  <button>btn</button>
  <button>btn</button>
</div>