Question

我设置了一个弹性箱网格，其中包含3个图像和4个图像。其中3个图像对它们有悬停效果，其中包含文本和链接。我刚刚完成了为期10周的编码课程，但没有包含响应式设计所以我一直在测试13“macbook和21”iMac，以确保设计和布局在这两种屏幕尺寸上看起来非常相似，我认为这些工作将会起作用适用于所有尺寸。

然而，虽然文字在13“上看起来很完美，但在21”它在文本下面有很多空间，所以我试图将它居中。

我尝试过将justify-content，align-content和align-self设置为各个位置的中心，但没有任何效果。

我附上了一个屏幕截图，显示它在21英寸屏幕上的外观，以向您展示我的意思。

这是html：

<div class="container">
    <div class="box bord crossfd" >
        <img src="images/lou.jpg" alt="Lou" />
    </div>
    <div class="text box" >
        <img src="images/shauna.jpg" alt="portrait of Shauna"  />
        <p>
            <span class="heading">About     Skramshots</span>
            SkramShots.com is the photography website of photgrapher, QA/Software Tester and UI/UX/Web Designer Mark Stewart.                        
            <span class="para2">Click on the link below to see larger views of the images you can see here. </span>                       
            <span class="para2">
                <a href = "images/ciaran.jpg" data-lightbox="clients" data-title="Ciaran">Larger versions</a>
            </span>
        </p>
    </div>
</div>

这是css：

.container {
    display: flex;
    flex-wrap: wrap;
}

.container img {
    background-size: contain;
    width: 100%;
}

.text {
    overflow: hidden;
    position: relative;
    transition: all 0.3s;
}

.container p {
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    color: white;
    font-family: helvetica, arial, sans-serif;
    font-size: 15px;
    height: 100%;
    left: 0;
    line-height: 1.7em;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5%;
    position: absolute;
    top: 100%;
    transition: all 1s ease 0s;
    width: 100%;
}

.container p .heading {
    color: #FFD829;
    display: block;
    font-size: 24px;
    padding-bottom: 15px;
}

.para2 {
    margin-top: 15px;
    display: block;
}

.container p a {
    text-decoration: none;
    color: #FFD829;
}

.container p iframe {
    padding-left: 10%;
}

.text:hover p {
    top: 0;
}

将文本悬停在flexbox网格中

0 个答案: