时间戳

首页 > 解决方案 > 在背景图片 CSS Flexbox 上垂直居中文本的问题

css - 在背景图片 CSS Flexbox 上垂直居中文本的问题

问题描述

我通常没有使用 justify-content、align-content、justify-items 和 align-items 居中的问题，但在这种特殊情况下，我找不到解决方案，任何人都知道为什么它在此不起作用确切的情况以及解决方案是什么？

我希望文字在图片上垂直和水平对齐，但它们只是水平居中。

这是 JSFiddle 链接：链接这里

CSS：

.services{
background-color: #fff;
}

.services .grid li{
padding: 20px;
height: 350px;
border-radius: 3px;

background-clip: content-box;
background-size: cover;
background-position: center;
background-color: #333;
}



.services .grid li.large{
flex-basis: 60%;
}

.services .grid li a {
color: red;
font-family: 'Open Sans', sans-serif;
background-color: green;

display: flex;
justify-content: center;
align-content: center;
}

HTML：

    <section id="services" class="services">
    <h3 class="title">Services</h3>
    <p>List of services.</p>
    <hr>

    <ul class="grid">
        <li class="large" style="background-image: url(assets/img/somepic.jpg);">
            <a class="servlink" href="#">Learn more</a>
        </li>
        
        <li class="large" style="background-image: url(assets/img/somepic.jpg);">
            <a class="servlink" href="#">Learn more</a>
        </li>
    </ul>
</section>

标签： csscentering

解决方案

您可以添加：

position: relative;
top: 50%;
transform: translateY(-50%);

给你的.services .grid li a

推荐阅读