Vertikale Ausrichtung Inhalt Slickslider

Question

Ich habe gekämpft, um meine Inhalte vertikal ausgerichtet, aber wirklich nicht zu beheben. Ich habe versucht, den adaptiveHeight-Parameter, aber es hat wirklich nicht getan, was ich wollte.

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

Dies ist, was der Code wie HTML aussieht:

<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

Ich denke, Sie müssen Text, den Inhalt in Absatz oder Überschriften, damit Sie nur mit den spezifischen Inhalten statt der gesamten div kommunizieren können.

Dann ist diese in Ihrem CSS tun:

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

Sie haben vielleicht eine Breite als auch zu geben.

Dies ändert den Ursprung der Position, an der der Absatz generiert wird, nicht von der oberen linken Ecke, sondern von der Mitte des Elements, das transform: translate verwendet. Verwenden Sie dann die Positionierung absolut und die oberen und linken Prozentsätze bei 50%, um sie auf die Mitte des Elternelements auszurichten.

Da ich noch immer selbst lerne, versuche ich mein Bestes zu geben, um Ihnen zu helfen, viel Glück. :)

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

Answer 2

Diese Lösung funktioniert für mich:

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

Siehe Beispiel hier:

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