Vertical alignment of slickslider content

Question

I tried my best to align my content vertically, but didn’t actually fix it. I tried the adaptiveHeight parameter, but it really did not do what I wanted.

Fiddle: http://jsfiddle.net/fmo50w7n/400

Here's what the HTML looks like:

<section class="slider"> <div style="width:500px;height:200px">slide1</div> <div style="width:500px;height:300px;">slide2</div> <div style="width:500px;height:100px;">slide3</div> </section> 

CSS

 $c1: #3a8999; $c2: #e84a69; .slider { width: auto; margin: 30px 50px 50px; } .slick-slide { background: $c1; color: white; padding: 40px 0; font-size: 30px; font-family: "Arial", "Helvetica"; text-align: center; } .slick-prev:before, .slick-next:before { color: black; } .slick-dots { bottom: -30px; } .slick-slide:nth-child(odd) { background: $c2; } 

JS:

 $(".slider").slick({ autoplay: true, dots: true, variableWidth:true, responsive: [{ breakpoint: 500, settings: { dots: false, arrows: false, infinite: false, slidesToShow: 2, slidesToScroll: 2 } }] }); 

Answer 1

This solution works for me:

 .slick-track { display: flex; } .slick-track .slick-slide { display: flex; height: auto; align-items: center; justify-content: center; } 

See an example here:

https://codepen.io/leggomuhgreggo/pen/mEmzGN

Answer 2

I think you need to put text, content in a paragraph or headings, this allows you to communicate only with specific content, and not with a full div.

Then in your CSS do the following:

 p { margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } 

You may need to specify a width.

What this does is change the source, in which the paragraph is generated not from the upper left corner, but from the center of the element using transform: translate. Then use absolute positioning and the top and left percentages at 50% to align it in the middle of the parent element.

Since I was still learning myself, I try my best to help you, good luck. :)

Source: https://css-tricks.com/centering-percentage-widthheight-elements/