Wyrównanie pionowe zawartości slickslider

Question

Starałem się, aby moje treści były wyrównane w pionie, ale tak naprawdę nie naprawiam tego. Wypróbowałem parametr adaptiveHeight, ale naprawdę nie zrobił tego, co chciałem.

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

To właśnie kod wygląda HTML:

<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

Myślę, że musisz umieścić tekst, treść w akapitach lub nagłówkach, to pozwala ci komunikować się tylko z określoną zawartością, zamiast z całym div.

Następnie w CSS to zrobić:

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

Możecie dać szerokość, jak również.

To, co robi, to zmienić początek miejsca, w którym akapit jest generowany, nie z lewego górnego rogu, ale ze środka elementu za pomocą transformacji: translate. Następnie za pomocą bezwzględnego pozycjonowania i górnego i lewego procentu na 50%, aby wyrównać go do środka elementu nadrzędnego.

Ponieważ wciąż uczę się sam, staram się jak najlepiej pomóc, powodzenia. :)

Źródło: https://css-tricks.com/centering-percentage-widthheight-elements/

Answer 2

Rozwiązanie to działa na mnie:

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

Zobacz przykład tutaj:

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