html - 使图像链接适合容器 div 并将其中的文本居中

Question

我正在尝试在 this website 的主页中创建图像链接.

问题是我无法让文本 block 位于图像的中心。我认为 a 标签不适合容器，我不知道如何修复它。帮助!

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

如果您从 home_img_item 类中删除您的 position:absolute(直接在 container 类之后)，并添加 vertical-align:middle;，则文本框水平和垂直居中。你们非常亲密! :)

Codepen

希望这对您有所帮助!