小提琴网址:https://jsfiddle.net/e8h0jb4a/1/。
<article><span>1</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>2</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>3</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>4</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>5</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
<article><span>6</span><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></article>
html{
font-size: 18pt;
}
body{
background-color: black;
font-family: "PT Sans", "Arial", sans-serif;
font-size: 20pt;
color: white;
padding: 0.5rem;
margin: 0.8rem;
display: flex;
flex-flow: row wrap;
gap: 0.5rem;
justify-content: center;
}
article{
border-style: solid;
border-color: #202020;
border-width: 1.5pt;
padding: 0;
width: 9.5rem;
height: 7.5rem;
background-color: #101010;
transition: 202ms;
text-align: center;
box-sizing: border-box;
font-size: 50pt;
cursor: pointer;
}
img{
object-fit: cover;
height: 100%;
width: 100%;
display: block;
opacity: 0;
transition: 202ms;
}
article:hover{
background-color: #1f1f1f;
}
.open{
cursor: default;
}
.open span{
display: none;
}
.open img{
opacity: 1;
}
.open:hover{
transform: scale(1.8);
}
$('article').click(function() {
$(this).addClass('open');
});
您会看到每张卡片上都有一些文字。单击卡片后,会显示图像,而文本会消失。到现在为止还挺好。现在我想让每个框中的文本垂直居中。而且我希望您可以单击以显示图像的框仅显示可见框(目前您也可以单击下方,因为文本会占用空间)。
我试图用文本的绝对位置来解决这个问题。那么问题是当您悬停图像时的动画会将图像带到其他框下方。
你会如何解决这些问题?我正在寻找仅 css 更改。我的 html 代码有没有很好的方法,或者 html 代码是否也需要更改?
答案 0 :(得分:0)
尝试使用 Flexbox。您可以使用 align-items: center
属性垂直对齐文本,使用 justify-content: center
水平对齐文本。您也可以为此使用 text-align: center
。不要忘记设置display: flex
,否则不会使用Flexbox。
This 网站对于理解 Flexbox 非常有用。
答案 1 :(得分:0)
所以为了使文本垂直居中对齐,您可以使用 CSS 属性。
article{
line-height:7.5rem; //value same as the height
}
当用户点击不同的元素时隐藏图像
$('article').click(function() {
for(var i=0;i<$("article").length;i++){
$("article").eq(i).children().eq(0).css("display","block");
$("article").eq(i).children().eq(1).css("opacity","0");
}
$(this).children().eq(0).css("display","none");
$(this).children().eq(1).css("opacity","1");
});
您可以使用此方法代替添加类。
编辑
您可以在 article
下方单击,因为 image
与 opacity:0;
一起使用,因此要解决此问题,您可以使用 display:none;
这是代码
img{
display: none;
}
.open img{
display:block;
}
你可以使用默认的 JS 代码,即
$('article').click(function() {
$(this).addClass('open');
});