Question

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

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

HTML： -

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

到目前为止，我已经尝试了很多我能在互联网上找到的东西。我应该标记，显示有9张照片，因此用户必须滚动。这意味着每个解决方案包含位置：绝对;不会做的。

正在通过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>');

Bootstraps网格无法将它们居中。

Answer 1

试试这个

＆＃13;

function shuffleArray(array) { // from http://stackoverflow.com/a/12646864/5710637
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

function Randomnumber() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var range = sheet.getRange("c2:C5");
  var min = sheet.getRange("A1").getValue();
  var max = sheet.getRange("A2").getValue();
  var numbers = []
  for (var i = min; i <= max; i++) {
    numbers.push(i);
  }
  shuffleArray(numbers)
  var counter = 0;
  for (var x = 1; x <= range.getWidth(); x++) {
    for (var y = 1; y <= range.getHeight(); y++) {
      range.getCell(y, x).setValue(numbers[counter]);
      counter++;
    }
  }
};

＆＃13;

或使用

＆＃13;

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

＆＃13;

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>');

以下是一个示例代码段：

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

父级的文本对齐中心将所有内联子元素放在中心。

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

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

3 个答案: