Question

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

问题是我无法使文本块到达图像的中心。我认为标签不适合容器，我也不知道如何解决。救命！

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

希望这会有所帮助！

使图片链接适合容器div，并在其中放置文本居中

1 个答案: