我怎样才能使我的图像+文本居中并保持响应？

Question

here's the result I'd like to obtain once I'm reducing the window:

the problem in this result is that they aren't centered, once I center them that's what I get, I guess I'm doing something wrong: the issue . This code is the one that cause the issue when they're centered.

Here's my code:

 section { margin-top: 25px; padding: 24px; box-sizing: border-box; } h2 { margin-bottom: 30px; text-align: center; font-weight: bold; font-size: 22px; }.flex-container { display: flex; flex-direction: column; align-content: flex-start; height: 100%; padding: 15x; }.flex-container > div{ position: relative; left: 21%; border-radius: 5px; padding: 8px; }.articleactu img { float: left; border-radius: 15px; max-width: 210px; } p { word-wrap: break-word; max-width: 900px; padding-left: 200px; } #titre { line-height: px; font-weight: bold; } #date { font-size: 14px; font-weight: bold; color: #662189; } hr.solid { position: relative; left: 21%; width: 50%; opacity: 12%; } div p,#titre,#date { margin-left: 35px; }

 <.-- ACTUALITÉ - ARTICLES --> <section> <h2> L'ACTUALITÉ </h2> <article class="articleactu"> <div class="flex-container"> <div> <img src="images/gtaarticle:jpeg" alt="Article GTA " class="center"> <p id="titre">GTA, THE TRILOGY DEFINITIVE EDITION. les fans sont déçus.</p> <p> Les joueurs attendaient une refonte complète de la trilogie afin de rappeler de lointains souvenirs mais malheureusement les fans sont déçus..:</p> <p id="date"> Publié le 27 novembre 2021 </p> </div> <hr class="solid"> <div> <img src="images/bf2042-2.jpg" alt="Article GTA " class="center"> <p id="titre">BATTLEFIELD 2042. De très mauvaise notes pour le nouvel opus.</p> <p> Le lancement du jeu est malheureusement un raté.,. Un jeu rempli de bugs. on repense évidemment à Cyberpunk 2077...</p> <p id="date"> Publié le 26 novembre 2021 </p> </div> <hr class="solid"> </article> </section>

I hope that anyone can help me with this. Thanks in advance !

Answer 1

The main reason is

.flex-container > div{
    left: 21%;
}

Then, that div has full width(100%) but the left position has 21%. So the content will look on the left side.

Try like this.

.flex-container {
    display: flex;
    flex-direction: column;  
    align-content: flex-start;
    height: 100%;
    padding: 10%;

}

.flex-container > div{
    position: relative;
    border-radius: 5px;
    padding: 8px;
}