0

I usually don't have problems centering using justify-content, align-content, justify-items and align-items but in this particular case, I can't find a solution, anyone has an idea why it doesn't work in this precise case and what a solution would be?

I would like the text to be vertically and horizontally aligned on the pictures but they are only horizontally centered.

Here is the JSFiddle link: LINK HERE

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>
NiHaoLiHai
  • 23
  • 1
  • 8

1 Answers1

-1

You can just add:

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

to your .services .grid li a

Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57