我如何垂直居中一列图像，以响应移动设备

Question

我正在编写一个显示 9 张具有特定标签的最新照片的应用程序。我通过将每张图片的尺寸设置为 240 像素宽和 200 像素高来解决不同图像尺寸的问题。

我的问题是如何将它们垂直居中以使它们位于屏幕宽度的中间？我希望它们具有响应性，因此无论显示它们的设备的宽度如何，它们始终位于中间。

HTML:-

<div id="results" class="row"></div> 

到目前为止，我已经尝试了几乎所有可以在互联网上找到的东西。我应该标记，有 9 张照片正在显示，所以用户必须滚动。这意味着每个解决方案都包含 position: absolute;不会的。

正在通过 Flickr API 挑选照片。之后，我 .append() 将它们添加到 div#results 中：-

$("#results").append('<div class="miniaturka col-xs-12 col-sm-4 col-md-4 col-lg-4"><a href="'+myresult_size.url+'" target="_blank"><img src="'+myresult_size.source+'" ></a></div>');

引导网格无法使它们居中。

Answer 1

试试这个

<div id="results" class="row text-center"></div> 

或使用

#results{
  margin: 0 auto;
  }

Answer 2

对于 4 宽的单元格，您需要使用偏移类 col-sm-offset-4。 当您定义col-sm-4 时，所有用于更宽视口的类都将继承此定义，我的意思是col-sm-4 等于col-sm-4 col-md-4 col-lg-4。您还需要为比其子图像更宽的单元格应用 text-center 类。

所以结果是：

$("#results").append('<div class="miniaturka col-xs-12 col-sm-4  col-sm-offset-4 text-center">
    <a href="'+myresult_size.url+'" target="_blank">
       <img src="'+myresult_size.source+'" >
     </a>
    </div>');

这里是一个例子 sn-p:

img {
  display: block;
  margin: 0 auto;
  max-width: 240px;
  max-height: 200px;
  height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="miniaturka col-xs-12 col-sm-4 col-sm-offset-4 text-center">
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/200/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/300/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/400/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/200/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/200/300">
    </a>
    <a href="#" target="_blank">
      <img src="http://placekitten.com/g/200/300">
    </a>
  </div>
</div>

Answer 3

Text-align center on parent 将所有内联的子元素居中。

.miniaturka {
  width: 100vw;
  text-align: center;
}

<div id="results" class="row">
  <div class="miniaturka col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <a href="#" target="_blank">
      <img src="http://placehold.it/350x150">
    </a>
  </div>
  <div class="miniaturka col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <a href="#" target="_blank">
      <img src="http://placehold.it/350x150">
    </a>
  </div>
</div>