如何從中心對齊多個圖像div？

Question

我現在有4個圖像div。 我希望他們開始從中心對齊。 這樣，如果有人將來添加更多圖像div，它將自動與中心對齊。 可能嗎 ？

Answer 1

使用bootstrap提供的網格模板並將父對象設置為容器。

的HTML

<div class="container">

<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>

<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>

<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>

<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>

</div>

據我了解，這就是您想要的？

完整版面

Answer 2

是的，您可以嘗試以下代碼。

<div class ='container'>
   <div class ='container-inner'>
      <div class ='image'>
        <img src=''>
      </div>
      <div class ='image'>
        <img src=''>
      </div>
      <div class ='image'>
          <img src=''>
       </div>
    </div>
 </div>

  <style>
   .container{
     width:100%:;
   }
  .container -inner{
     display: table;
    margin:auto;
 }
.image{
   float : left;
}
 </style>

上面的代碼可幫助您將所有圖像容器放在中心。 如果向其中添加單個圖像，則僅采用該寬度即圖像寬度並對齊中心，如果更多圖像采用寬度作為對齊中心。