Не работает align-items?

Question

[nyrau_v_tvorojok]

<div class="slider">
    <div class="slider-background col-md-12">
        <div class="cursors ">

            <div class="cursor cursor-left">
                <div class="cube">
                    <div class="arrow arrow-left"></div>
                </div>
            </div> 

            <div class="cursor cursor-right">
                <div class="cube">
                    <div class="arrow arrow-right"></div>
                </div>
            </div>

        </div>

        <div class="slider-text">
            <p class="slider-h-p">Здесь радиаторы</p>
            <p class="slider-p-p"> УAловите свое руки мощные  вдохновениев  УAловите свое руки мощные  вдохновениев <br>УAловите свое руки мощные  вдохновениев УAловите свое руки мощные  вдохновениев <br>УAловите свое руки мощные  вдохновениев УAловите свое руки мощные <br> вдохновениев УAловите свое руки мощные  вдохновениев УAловите свое руки мощные  вдохновениев</p>
        </div>
    </div>
</div>

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.slider {
    position: relative;
    //overflow: hidden;
    .slider-background {
        height: 535px;
        background-image: url('/img/sklad-background.png');
        
        .slider-text {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .slider-h-p {
                color: #FFCE00;
                font-family: 'Rubik', sans-serif;
                font-size: 45px;
            }
            .slider-p-p {
                color: #F4F2E9;
                font-family: 'Rubik', sans-serif;
            }
        }
        .cursors {
            //height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .cursor {
                .cube {
                    width: 55px;
                    height: 55px;
                    border-radius: 2px;
                    border: 2px solid #FFCE00;
                    .arrow {
                        border: solid #FFCE00;
                        border-width: 0 6px 6px 0;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        padding: 6px;
                    }
                    .arrow-left {
                        margin-top: 16px;
                        margin-left: 18px;
                        transform: rotate(135deg);
                        -webkit-transform: rotate(135deg);
                    }
                    .arrow-right {
                        margin-top: 16px;
                        margin-left: 12px;
                        transform: rotate(-45deg);
                        -webkit-transform: rotate(-45deg);
                    }
                }
            }
        }
    }
}

Выставляю высоту=100% классу slider-text, тогда класс cursors уезжает наверх. Если наоборот, то cursors встает на место, а slider-text уезжает наверх. В чем проблема?

Answer 1

[Андрей]

С align-items все в порядке. Проблема в структуре разметки. Я бы рекомендовал Вам вынести управление слайдером из конкретного слайда(их же будет больше одного) и переделать кнопки на абсолютное позиционирование.