Vertically center next/prev buttons within image, not cell

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels

https://flickity.metafizzy.co

7.52k stars 605 forks source link

Vertically center next/prev buttons within image, not cell #950

Closed kaleidografik closed 4 years ago

kaleidografik commented 5 years ago

When using Flickity cells to contain both multiple elements (in this case an image and a caption), I'm not able to correctly centre the prev/next buttons. For example, in the below reduced test case, I want the buttons centred with the .image, rather than the overall .carousel-cell. In my real world example, the height of .image is unknown as it is scalable, so I cannot make use of anything like calc().

Is there any other approach?

https://codepen.io/kaleidografik/pen/MdMbgX

desandro commented 5 years ago

If you're unable to accurately control the position of prev/next buttons with CSS, then you may have to resort to using JavaScript to read cell or image height and set a value using some calculation.