我正在尝试在 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;
}
}
}
}
最佳答案
如果您从 home_img_item 类中删除您的 position:absolute
(直接在 container
类之后),并添加 vertical-align:middle;
,则文本框水平和垂直居中。你们非常亲密! :)
希望这对您有所帮助!
关于html - 使图像链接适合容器 div 并将其中的文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52120136/