页面缩放或调整大小时如何防止图片偏移，维持居中布局？

Hey there! I see the problem you're facing—when you scale down your page, those article cards start shifting left instead of staying nicely centered. Let's get this sorted out.

What's Causing the Problem? #

Right now, you're using inline-block with a fixed margin-left: 20% on each article. This works okay at certain zoom levels, but when the page width shrinks, that fixed percentage margin doesn't account for the combined width of the two cards. The browser can't keep them centered because the spacing is hardcoded relative to the left edge, not the entire container.

The Solution: Use Flexbox for Responsive Centering #

Flexbox is perfect for this kind of responsive layout—it handles centering and wrapping automatically, no matter the screen size. Here's how to adjust your code:

Step 1: Wrap Your Articles in a Container

First, add a parent container around both article divs to group them together. This gives us a single element to apply flexbox to:

<div class="articles-container">
  <div id="Article" class="Article"> 
    <h2> What next for Italy </h2> 
    <img src="News_Images/Italy_Dissapointed.jpg" alt="Udine" width="330" height="180"> 
    <p><i>Matteo Buonastella</i>, November 15, 2017</p> 
    <button class="btn btn-info" onclick="Atalanta3()">Read More</button> 
    <div id="display3" class="display"> <div id="choose3"></div> </div> 
  </div> 
  <div id="Article2" class="Article"> <!-- Changed class to Article for consistency -->
    <h2> Are Atalanta fatigued? </h2> 
    <img src="News_Images/Test1.jpg" alt="Udine" width="330" height="180"> 
    <p><i>Matteo Buonastella</i>, May 22, 2017</p> 
    <button class="btn btn-info" onclick="Atalanta2()">Read More</button> 
    <div id="display2" class="display"> <div id="choose2"></div> </div> 
  </div>
</div>

(Note: I changed the class of the second article to Article instead of Article2 so we can style both with one rule—no need for duplicate CSS!)

Step 2: Update Your CSS

Now replace your existing article styles with this flexbox setup:

.articles-container {
  display: flex;
  justify-content: center; /* Centers the articles horizontally */
  flex-wrap: wrap; /* Lets articles wrap to a new line on small screens */
  gap: 2rem; /* Adds space between the two articles */
  margin-bottom: 5%;
}

.Article {
  display: inline-block; /* Keeps the article content grouped */
}

Why This Works #

• justify-content: center tells the flex container to align its children (your articles) in the center of the available space, no matter how wide the container gets.
• flex-wrap: wrap ensures that if the screen gets too small to fit both articles side by side, they'll stack vertically instead of overflowing or getting squished.
• gap gives consistent spacing between the articles without relying on messy margins that can break alignment.

If you want a little extra space around the articles, you can add padding to the .articles-container or margin to the .Article class—flexbox will still keep everything centered.

内容的提问来源于stack exchange，提问作者Workkkkk