Center two images with flexbox - html

Question

I have this situation:
<div class="slot_twoimages">
<article class="slot image">
<img src="https://via.placeholder.com/560x441" />
</article>
<article class="slot image">
<img src="https://via.placeholder.com/560x441" />
</article>
<article class="slot text">
<div class="headline">HEADLINE</div>
</article>
with this style:
.slot_twoimages {
height: auto;
background-image: linear-gradient(120deg, yellow, pink);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
.slot.image {
//margin: 121px 40px 64px;
display: inline-block;
flex: 50%;
//DA RIMUOVERE
img {
max-width: 560px;
max-height: 441px;
}
}
.slot.text {
width: 100%;
display: block;
text-align: center;
margin: 0 30% 88px;
margin-bottom: 88px;
.headline {
font-size: 29px;
margin-bottom: 50px;
letter-spacing: -0.015em;
padding-top: 24px;
padding-bottom: 10px;
}
}
}
Now, I want to center two images with flexbox and I need to center slot text under the two images. I need to mantain the images in the same position and it's necessary the image scaling. I can't modify the DOM.
Here is my codepen: https://codepen.io/andrew_88/pen/rqpxMP

Answer 1

CSS part
.slot_twoimages {
height: auto;
background-image: linear-gradient(120deg, yellow, pink);
display:grid;
grid-template-columns: 0.5fr 1fr 0.5fr;
}
.slot_twoimages .slot.image {
}
.slot_twoimages .slot.image img {
max-height: 441px;
}
.slot_twoimages .slot.text {
width: 100%;
display: block;
text-align: center;
margin-bottom: 88px;
}
.slot_twoimages .slot.text .headline {
font-size: 29px;
}
#image1
{
grid-column: 2;
}
#image2
{
grid-column: 2;
}
#text1
{
grid-column: 2;
text-align: center
}
HTML part
<div class="slot_twoimages">
<div id="image1" class="slot image">
<img src="https://via.placeholder.com/560x441" />
</div>
<div id="image2" class="slot image">
<img src="https://via.placeholder.com/560x441" />
</div>
<div id="text1" class="slot text">
<div class="headline">HEADLINE</div>
</div >
</div>
Result :
https://codepen.io/richardpariath3/pen/oapbRB
Please note that I made use of CSS Grids