css如何防止图像在页面调整大小时移动

Question

当放大到大约 80% 或 90% 时，热门文章下的这两张图片很好地居中，但一旦我开始缩小，图片(文章)就开始向左移动。我希望图像保持中左和中右的外观，但不确定如何实现这一点

//HTML

<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 = "Article2">
   <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>

//CSS

#Article{
   display:inline-block;
   margin-bottom:5%;
   margin-left:20%;

}

#Article2{
   display:inline-block;
   margin-bottom:5%;
   margin-left:20%;

}

Answer 1

您可以使用 flexbox 来确保间距保持一致。

在父元素中，我将显示设置为 flex，然后添加了 justify-content: space-around;这意味着通过在元素周围放置更多空间来分隔元素。

.articles {
  display: flex;
  justify-content: space-around;
}

.fake-image {
  height: 130px;
  width: 250px;
  background: tomato;
}

<div class="articles">
  <div class="article">
    <h2> What next for Italy </h2>
    <div class="fake-image"></div>
    <p><i>Matteo Buonastella</i>, November 15, 2017</p>
    <button>Read More</button>
  </div>
  <div class="article">
    <h2> Are Atalanta fatigued? </h2>
    <div class="fake-image"></div>
    <p><i>Matteo Buonastella</i>, May 22, 2017</p>
    <button>Read More</button>
  </div>
</div>

希望对您有所帮助