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

Question

当放大到大约80％或90％时，趋势文章下的这两个图像很好地居中，但是一旦我开始缩小，图像（文章）就开始向左移动。我希望图像保持中心左右和中右视，但我不确定如何实现这个

// HTML

Global.asax.cs

// CSS

<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>

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>

我希望这很有用