如何对齐来自数据库的'n'个图像

Question

我有存储在数据库中的图像链接，我想将设置图像放在屏幕中央（在我的情况下是左对齐） 。无论有多少图片动态出现，图片集应该对齐中心。 我使用 bootstrap 进行设计，这就是我的代码的样子：

<div class="row">
    <div class="col-md-12 text-center">
      <?php
         foreach($n as $val)
         {                     // loop to iterate 'n' image links
      ?>
             <div class="col-md-1">
                  <img src="<?php echo $val; ?>" // images showing up.
             </div>
       <?php  
          }
       ?>
    </div>
</div>

我在下面添加了一张图片来演示这种情况。 我尝试了以下内容：

1. bootstrap类：center-block（基于保证金）
2. bootstrap类：text-center（基于text-align）
3. bootstrap classes：“img-responsive center-block”

请注意：

  

我不想强行将内容推向中心（比如使用bootstrap类“col-md-push-3”或类似的东西，因为要显示的图像数量不固定。它们不时变化）

Answer 1

默认情况下，用于包装图像[col-md-1]的列类会向左浮动....您必须覆盖该行为。

.text-center .col-md-1 {
  float: none;
  display: inline-block;
}

.text-center .col-md-1 {
  float: none;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 text-center">
    <div class="col-md-1">
      <img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12 text-center">
    <div class="col-md-1">
      <img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
    </div>
    <div class="col-md-1">
      <img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
    </div>
  </div>
</div>

Answer 2

您仍然可以使用FlexBox使用一些好的旧CSS，如Fiddle所示。基本上，它使用如下结构：

<div class="container">
  <div class="picture">
     <img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
  </div>
</div>

然后，通过一些FlexBox属性，您可以实现您想要的目标：

.container {
   display: flex;
}

.picture {
   flex: 1 1;
   width: 100%;
}

img {
   width: 100%;
}

总而言之，您将容器置于弹性模式，然后其所有div将占用相同的空间。为了保持每个图像的纵横比，需要一些中间div。

如果您希望在可用图片较少的情况下居中，您仍然可以使用justify-content: center;属性，在div上设置最大宽度，例如other Fiddle。

但请注意此解决方案would not work on IE9-。

Answer 3

使用text-align：center创建一个div Amand然后使用display：inline-block

在其中创建一个div