Vertical alignment of elements of a slider/carousel made with Slick

HTML & CSS
1

Good day,

I have a website with a slider made with slick.
In order to vertically align the items within the slider, I added these styles to my CSS file:

.slider img{
    padding: 10%;
    width: 80%;
    vertical-align: middle;
}

.slider a{
    vertical-align: middle;
    line-height:normal;
    display: inline-block;
}

.slider div{
    height: 161px;
    line-height: 161px;
}

The result was ok and now all items are vertically aligned:
http://www.libromania.cl/spanish/home_spanish_test.shtml

My concern is because the only one way for me to accomplish this was to fix height of .slider division. If I leave this as a percentage or anything not fixed, it does not work.
Is it any other way to do this without fixing the division?
If not, is there any problem leaving height fixed? I mean, not related to the screen size, when the page is opened by devices of different sizes?

Thanks a lot.

2

Given that the slider contents are just images, I’d say it’s quite safe to set a height on the sliding divs. If you were dealing with text, it would be slightly more risky, since user font sizes can vary.

3

Hi, the page that you are linking to has a horizontal slider. I see nothing vertically aligned, so I’m not sure how to answer your question.

On an unrelated note, some of the attribute values are surrounded by “smart” quotes which HTML does not recognize. The “smart”, curly quotes need to be replaced with conventional, straight, “dumb” quotes like the one’s I’ve used here. The HTML validator can help.

4

Hi,

You don’t really need to set a height or line-height if instead of floating the slick-slide div you used display:inline-block instead and then you could use vertical-align:middle to align each block with respect to the elements on that line and not the container. However as the script is setting that element to display:block you would need !important to over-ride it.

It’s probably not worth the effort to do this as Ralph mentioned unless you want to have images larger than 160px tall in that section or if you want the container to shrink to fit.

5