Как выровнять картинки в слайдере по высоте по центру?

Question

[AlXan]

Никак не могу выровнять картинки в слайдере, чтобы они были вертикально по центру.

Сейчас как верхний, нужно сделать как нижний


Временный сайт https://squarecat.s1-tastewp.com/

Помогите пожалуйста - какие правила css нужно добавить?

Answer 1

[Максим]

.slick-slider .slick-list, .slick-slider .slick-track{
  display: flex;
  align-items: center
}

Comments

[AlXan]

Спасибо, а можно чуть наберусь наглости попросить дополнить? (я не учёл этого при составлении вопроса). Так стрелки налазят на картинки. Как сделать чтобы они были как на нижнем? (может быть уменьшить область с картинками ?)

[Максим]

AlXan,

.gutentor-post-module .slick-prev, .gutentor-post-module .slick-next, .gutentor-module .slick-prev, .gutentor-module .slick-next, .gutentor-section .slick-prev, .gutentor-section .slick-next {
    z-index: 1;
    color: #fff;
    text-align: center;
    font-size: 14px;
    background: #222;
    line-height: 0;
    position: absolute;
    top: 80%;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    border: none;
    outline: none;
}

[AlXan]

Максим, я уже решил чуть проще

.slick-list.draggable {
	margin: 0 2em;
}

Но всё равно спасибо.