сделать ссылку на изображение вписать контейнер div и центрировать текст внутри него

Question

Я пытаюсь создать ссылки на изображения на главной странице этого сайта .

Проблема в том, что я не могу заставить текстовый блок прийти в центр изображения. Я не думаю, что тег подходит к контейнеру, и я не знаю, как это исправить. Помогите!

SCSS:

.home-img-links {
    @include flexCenter;
    margin: 4rem 0;

        .container {
            width: 600px;
            height: 350px;
            margin: 1rem;
            display: block;
            position: relative;
            overflow: hidden;
            filter: brightness(100%);


            .home-img-item {
                display: block;
                position: absolute;

                img {
                    @include easeOut;
                    max-width: 100%;
                    max-height: 100%;
                }

                .home-img-link-text {
                    @include easeOut;
                    color: $secondary-color;
                    max-width: 100%;
                    max-height: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    text-align: center;
                    border: 0px solid $secondary-color;
                    transform: translate(-50%, -50%);
                    opacity: 0;
                    white-space: nowrap;
                    padding: 6rem 5rem;
                }
            }

            &:hover {
                box-shadow: 19px 52px 198px -31px rgba(0,0,0,0.75);

                .home-img-item img {
                    transform: scale(1.2);
                    filter: brightness(50%);
                }

                .home-img-link-text {
                    opacity: 1;
                    border: 10px solid $secondary-color;
                }
            }

    }
}

https://codepen.io/yubind/pen/MqJzgX

Answer 1

Если вы удалите position:absolute из класса home_img_item (сразу после класса container) и добавите vertical-align:middle;, тогда текстовое поле будет центрировано по горизонтали и вертикали. Вы были очень близки! :)

Codepen

Надеюсь, это поможет!