Question

小提琴网址：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 代码是否也需要更改？

Answer 1

尝试使用 Flexbox。您可以使用 align-items: center 属性垂直对齐文本，使用 justify-content: center 水平对齐文本。您也可以为此使用 text-align: center。不要忘记设置display: flex，否则不会使用Flexbox。

This 网站对于理解 Flexbox 非常有用。

Answer 2

所以为了使文本垂直居中对齐，您可以使用 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');
    });

小提琴 https://jsfiddle.net/vrf58L4s/5/

在图像框中显示文本（在显示图像之前）

2 个答案: