html - CSS 垂直对齐和 fancyBox

Question

我正在为我的摄影页面制作一个相册(使用 fancyBox 和 PHP)，但我不知道如何使我的相册垂直对齐居中。

我目前已经放置了模拟图像(来 self 自己的画廊)来确定布局，然后我将用 PHP 查询替换它们以自动用我的所有内容填充画廊。我还为每一行提供了一种(临时的)不同颜色，以简单地可视化布局，并在顶部设置了一个 12 格布局栏，以便于处理。我目前设置 HTML 和 CSS 代码的方式如下:

HTML:

<div class="gallery">
<div class="row row-one">
        <div class="col-lg-4">
            <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/burnaby_mountain.jpg'><img class='img-responsive' src='images/photography/thumbs/burnaby_mountain.jpg'></a>
        </div>
        <div class="col-lg-4">
            <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/lions_gate.jpg'><img class='img-responsive' height="500px" src='images/photography/thumbs/lions_gate.jpg'></a>
        </div>
        <div class="col-lg-4">
            <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/bubbles.jpg'><img class='img-responsive'  src='images/photography/thumbs/bubbles.jpg'></a>
        </div>
   </div>
</div>

CSS:

.gallery {
display: table;
 }
div .row-one {
background-color: red;
display: table-row;
vertical-align: middle;
}
.col-lg-4 {
display: table-cell;
}

如您所见，我已将列嵌套在行中(我没有包含其他行的 CSS 代码，因为除了背景颜色属性外它们是相同的，目的是稍后通过PHP 查询)和名为 gallery 的 div 容器中的行。从我通过查找解决方案看到的其他示例中，我看到人们为主容器提供了表的显示属性，并为属性 display: table-row 提供了行，最后为列提供了 table-cell 属性。我已经尝试过这个，以及 CSS 属性的许多其他组合，但还没有找到使画廊居中的方法。

For a better visualization of what I would like to achieve

感谢您的帮助，请原谅这个冗长的问题。我已经搜索了很长时间，现在感觉我的代码中有问题。我对 HTML/CSS 还很陌生，虽然我的大部分网站都按预期工作，但这是我需要让它启动和运行的最后一点。

Answer 1

是这样的吗？

.gallery {
  display: flex;
  height: 30%;
  /*   flex-direction:column; */
}

.box {
  border: 1px solid white;
  background: red;
  display: flex;
  justify-content: center;
  flex: 1;
  padding: 10px;
}

.inner-box {
  align-self: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gallery">
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/burnaby_mountain.jpg'><img class='img-responsive' src='https://i.kinja-img.com/gawker-media/image/upload/t_original/bhjivrw2chm9um9yrrmy.jpg'></a>
    </div>
  </div>
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/lions_gate.jpg'><img class='img-responsive' height="500px" src='https://media.gettyimages.com/photos/cocker-spaniel-puppy-picture-id904219284'></a>
    </div>
  </div>
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/bubbles.jpg'><img class='img-responsive' src='http://cdn.bangli.uk/images/201504/article_9323_1.jpg'></a>
    </div>
  </div>
</div>

<div class="gallery">
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/burnaby_mountain.jpg'><img class='img-responsive' src='https://i.kinja-img.com/gawker-media/image/upload/t_original/bhjivrw2chm9um9yrrmy.jpg'></a>
    </div>
  </div>
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/lions_gate.jpg'><img class='img-responsive' height="500px" src='https://media.gettyimages.com/photos/cocker-spaniel-puppy-picture-id904219284'></a>
    </div>
  </div>
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/bubbles.jpg'><img class='img-responsive' src='http://cdn.bangli.uk/images/201504/article_9323_1.jpg'></a>
    </div>
  </div>
</div>