Slick: Vertical align slides

[mweterings]

Is there a possibility to vertical align the image slides ?

[kenwheeler]

yes. use the vertical option

[peschee]

I think he meant vertically aligning the slides @kenwheeler, not vertical sliding. Any best practice to do this with slick? table and table-cell seem problematic, so doing it with css only might be an issue.

[peschee]

There's actually quite an easy way to do this @mweterings, without having to rely on display table and table-cell. Let's say you have the following HTML structure for your slides:

<div class="slick-gallery">
    <figure class="slick-slide">
        <img src="..." />
    </figure>
</div>

You can center the images as follows:

.slick-slide {
    text-align: center;
}

.slick-slide::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.slick-slide img {
    vertical-align: middle;
    display: inline-block;
}

Taken from http://css-tricks.com/centering-in-the-unknown/

[floatorhead]

same problem here. the solution from css-tricks.com doesn't work in my case. maybe due to the images overflowing my actual slider-size. However, I'm a beginner to wedesign and coding...
Could anyone solve the issue so far?

[tomasguemes]

Hello,

The technique from css-tricks.com works for me adding a fixed height to the container:

.slick-track {
height: 200px;
}

[jcoffland]

@peschee, thanks that worked really well!

[akazakou]

@peschee, thanks for great solution!

[danbars]

That trick is useful to center when the child and parent are unknown.
Since you add explicit height to slick-track, that is no longer the case, and you can center using a simpler techniques, like this one:

.slick-track {
height: 200px;
}

.slick-slide {
  top: 50%;
  transform: translateY(-50%);
}

That works because top percentage is relative to the parent, while transform percentage is relative to the element itself. So we push it 50% of the parent down, then pull it back up 50% of its own height.

[casikr]

Hi,
using: display: flex; align-items:center on .slick-slide works for me in most browsers.

[wiesson]

thanks @peschee - works perfectly! :ok_hand:

[SarahBaghdadi]

@peschee's solution only seems to work when I also use @tomasguemes's modification

[Bondra]

It's totally hopeless trying to vertical align content within the slider that has an unknown height? I've struggling with this like a maniac. What tha hell am I doing wrong?

[TarikTz]

When slider is in vertical mode, image in center is actually last image on start and that bug keeps happening while scrolling. Any idea how to fix this?

[jpotterm]

Here's the simplest solution I've found:

.slick-initialized .slick-slide {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

[Mazzy71]

@jpotterm Thanks, it working indeed.
BTW Great timing, Your reply appeared 5 minutes before I've visited this issue:)

[rockmandew]

@jpotterm - Thank you for the solution. As an alternative, I was having an issue with titles above the image being too long, which pushed the slide down. I wanted all the images to line up and the titles to "grow" upwards. Using "vertical-align: baseline;" allows for this to happen. I just wanted to leave my experience to help out anyone else who is having any issues with a similar problem.

[efimBistrov]

@jpotterm Thanks))

[andyanderso]

@jpotterm Thanks - that is an elegant solution.

[zibot]

With flexbox

.slick-initialized .slick-track {
    display: flex;
    align-items: center;
}

[johnmatunog]

    .slick-initialized .slick-slide {
           float: inherit;
           display: inline-block !important;
           vertical-align: middle;
    }

[cotisap]

@zibot I tried every solution here, and I don't know why, but your solution was the only one that worked for me!

[cicero83]

I love flexbox, thanks @zibot for this solution!

[MakPet]

    .slick-initialized .slick-slide {
           float: inherit;
           display: inline-block !important;
           vertical-align: middle;
    }

@johnmatunog thanks.