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>

据我所知，这就是你想要的？

Full Layout

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>

以上代码可帮助您将所有图像容器放在中心位置。如果您向其添加单个图像，则只需要宽度即图像宽度和对齐中心，如果更多图像的宽度与对齐中心相同。

如何将多个图像div与中心对齐？

2 个答案: