0

How do I center .arrow inside .prev & .next vertically & responsive to the height of .mySlides as it varies based on content. I've tried adjusting position, top, transform, margin-top, line-height and can't get the result I'm looking for. Here is the full code: https://jsfiddle.net/t8ap0gvz/4/

.prev {
grid-area: 1 / 1 / 4 / 1;
color: white;
font-weight: bold;
font-size: 40px;
opacity: 0.5;
background: yellow;
border-radius: 15px 0 0 15px;
border: 1px solid red;
left: 10%;
position:relatve
}

.next {
grid-area: 4 / 4 / 1 / 3;
color: white;
font-weight: bold;
font-size: 40px;
opacity: 0.5;
background: yellow;
border-radius: 0 15px 15px 0;
border: 1px solid red;
position:relatve
}


.arrow {
transform: translateY(-50%);
}
Jennifer
  • 121
  • 1
  • 8
  • position:relative to next /prev and remove default margin from p – Temani Afif Nov 15 '19 at 22:18
  • I added position relative to .prev & .next with top: 50% and updated .arrow to position relative and this did not solve my issue. where is default margin? – Jennifer Nov 15 '19 at 22:24
  • 1
    no need to add any top:50% or change position of arrow. Keep your code like you posted here and simply add `position:relatve` to nex/prev (the container of arrow) .. and the default margin is on arrow which is a P element – Temani Afif Nov 15 '19 at 22:26
  • @TemaniAfif I tried applying different margins to both .arrow and p{}. I've edited the positions in my question for you to see - but it didn't solve my issue. Do I have it wrong still? – Jennifer Nov 15 '19 at 22:32
  • https://jsfiddle.net/214kyfj3/ – Temani Afif Nov 15 '19 at 22:33
  • @TemaniAfif your edits cause .arrow to not be centered horizontally and .prev has been shift to the right and is no longer aligned to the left side of .slideshow-container – Jennifer Nov 15 '19 at 22:35
  • 1
    you arrow wasn't centred horizontally initially .. to do this use the same trick like you did with top ... for the shift, you have left:10% on the code remove it: https://jsfiddle.net/6cm98vef/ – Temani Afif Nov 15 '19 at 22:39

0 Answers0