图像中间的中心按钮

Question

我尝试制作位于图片中间的按钮，但问题是这些按钮位于页面中间或图片下方。任何建议如何解决它和我做错了什么？ https://jsfiddle.net/m5g16vt7/

＆＃13;

＆＃13;

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

imageSlide-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: pink;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8)
}

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

＆＃13;

<div class="imageSlide-container">
  <img class="imageSlide" src="img_nature_wide.jpg" style="width: 100%">

  <a class="prev" onclick="plusSlide-button(-1)">&#10094;</a>
  <a class="next" onclick="plusSlide-button(1)">&#10095;</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查以下代码段

＆＃13;

＆＃13;

* {box-sizing:border-box}
			body {font-family: Verdana,sans-serif;margin:0}
            
        .imageSlide-container {
          max-width: 1000px;
          position: relative;
          margin: auto;
            }
            
			.prev, .next {
				cursor: pointer;
				position: absolute;
        top: 50%;
				width: auto;
				padding: 16px;
				margin-top: -22px;
				color: pink;
				font-weight: bold;
				font-size: 18px;
				transition: 0.6s ease;
				border-radius: 0 3px 3px 0;
        transform: translateY(-50%;)
			}
			.next {
				right: 0;
				border-radius: 3px 0 0 3px;
			}
			.prev:hover, .next:hover {
				background-color: rgba(0,0,0,0.8)
			}
            @media only screen and (max-width: 300px) {
 				.prev, .next,.text {font-size: 11px}
  			}

＆＃13;

 <meta name="viewport" content="width=device-width, initial-scale=1">
<div class="imageSlide-container">
			<img class="imageSlide" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width: 100%">

      <a class="prev" onclick="plusSlide-button(-1)">&#10094;</a>
      <a class="next" onclick="plusSlide-button(1)">&#10095;</a>
</div>

＆＃13;

＆＃13;

＆＃13;

您忘记在css中的班级名称.之前添加imageSlide-container 并且您需要添加transform: translateY(-50%;)和top:50%来调整垂直居中的箭头。

Answer 2

检查一下。但是，如果要放置图像的按钮中心，只需调整上边距，如果向左或向右，只需更改 text-align 属性。

＆＃13;

＆＃13;

      <meta name="viewport" content="width=device-width, initial-scale=1">
      * {box-sizing:border-box}
			body {font-family: Verdana,sans-serif;margin:0}
            
            imageSlide-container {
				max-width: 1000px;
				position: relative;
				margin: auto;
            }
       .buttons{
         text-align: center;
        margin-top: -45px;
       }  
			.prev, .next {
				cursor: pointer;
        top: 50%;
				width: auto;
				padding: 16px;
				color: pink;
				font-weight: bold;
				font-size: 18px;
				transition: 0.6s ease;
				border-radius: 0 3px 3px 0;
			}
			.next {
				right: 0;
				border-radius: 3px 0 0 3px;
			}
			.prev:hover, .next:hover {
				background-color: rgba(0,0,0,0.8)
			}
            @media only screen and (max-width: 300px) {
 				.prev, .next,.text {font-size: 11px}
  			}

＆＃13;

<div class="imageSlide-container">
			<img class="imageSlide" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width: 100%">

      <div class="buttons">
      <a class="prev" onclick="plusSlide-button(-1)">&#10094;</a>
      <a class="next" onclick="plusSlide-button(1)">&#10095;</a>
      </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你错过了css中的一个点：

error : PFX signing not supported on .NET Core

Answer 4

在 imageSlide-container

的前面添加点（。）

Exception in thread "main" 
Exception: java.lang.OutOfMemoryError thrown from the 
UncaughtExceptionHandler in thread "main"