CODEWITHSUNDEEP
htmlcss
Marek
Marek

Reputation: 147

Center buttons in middle of image

I try to make buttons that will be in the middle of the picture, but the problem is that either those buttons are in the middle of the page or under the picture. Any suggestions how to fix it and what I do wrong? https://jsfiddle.net/m5g16vt7/

* {
  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
  }
}
<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>

Upvotes: 0

Views: 87

Answers (4)

Shahjahan
Shahjahan

Reputation: 552

Check this out. However if you want to place buttons center of the image just adjust your top margin and if left or right just change the text-align property.

      <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}
  			}
<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>

Upvotes: 0

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

check below snippet

* {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}
  			}
 <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>

You forgot to add . before class name imageSlide-container in css and you need to add transform: translateY(-50%;) and top:50% to adjust arrows vertically centered.

Upvotes: 2

Santhoshkumar
Santhoshkumar

Reputation: 780

add dot(.) infront of imageSlide-container 

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

Upvotes: 0

joshua miller
joshua miller

Reputation: 1756

You missed a dot in the css:

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

Upvotes: 0

Related Questions