图像顶部的移动按钮答案

【问题标题】：Moving button on top of image图像顶部的移动按钮
【发布时间】：2020-05-06 21:56:45
【问题描述】：

我有两个按钮需要移动到图像顶部。一个按钮应位于图像的右侧，另一个按钮应位于左侧。然而，目前它们停留在图像的左下角，而它们应该位于照片中间的不同侧面。我做错了什么？

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

【问题讨论】：

您的选择器中缺少.。 .container .carousell-button-right { }
200%px 无效

标签： html css button

【解决方案1】：

因为你需要它在中间然后使用Relative作为父级并使用absolute作为Right。这将确保它根据图像大小绝对位于中间。

您还应该将. 用于carousell 类。

如上面的 cmets 中所述，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>

【讨论】：

【解决方案2】：

看看下面的sn-p，试试用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>

【讨论】：