CSS prev next button show at middle of image

Question

Can anyone please tell me How can I show the icon in the middle of the image left and right side?

I tried many solutions but they not worked.

.slide {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  padding: 7px 4px;
  margin: 5px;
  cursor: pointer;
  height: 32px;
  width: 32px;
  background-color: #2874f0;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

.image {
  height: auto;
  width: auto;
  max-height: 350px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

<div style="width:100%" (click)="open_slider()">
  <a class="slide">></a>
  <img style="" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN.jpg">
  <a class="slide"><</a>
</div>

Anzil khaN · Accepted Answer · 2018-03-24T14:27:20.047

0

Use vertical-align: middle; to img and .slide for vertical align. And use text-align: center; to parent div for horizontal align.

Here is the working snippet.

.slide {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  padding: 7px 4px;
  margin: 5px;
  cursor: pointer;
  height: 32px;
  width: 32px;
  background-color: #2874f0;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  vertical-align: middle;
}

.image {
  height: auto;
  width: auto;
  max-height: 350px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
img {
  display: inline-block;
  vertical-align: middle;
}

<div style="width:100%; text-align: center;" (click)="open_slider()">
  <a class="slide">></a>
  <img style="" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN.jpg">
  <a class="slide">
    <</a>
</div>

edited Mar 24 '18 at 14:27

answered Mar 24 '18 at 13:49

Anzil khaN

1,904
1
14
25

Image moved left side I want an image at center with vertical-align of icon center. – Shah Rushabh Mar 24 '18 at 13:57
`Image moved left side` , Sorry didn't understand. Can you show me a picture that you want ?? @ShahRushabh – Anzil khaN Mar 24 '18 at 14:01
(1) Image center horizontally. – Shah Rushabh Mar 24 '18 at 14:22
(2) Next prev icon center horizontal and vertical – Shah Rushabh Mar 24 '18 at 14:22
How carousel showing button left and right side in middle. – Shah Rushabh Mar 24 '18 at 14:26
I update my answer please check now. @ShahRushabh – Anzil khaN Mar 24 '18 at 14:27

CSS prev next button show at middle of image

1 Answers1