在放大弹出窗口中垂直对齐图像

Question

我想在网页画廊中垂直对齐我的图片，以便所有底部都在一条线上对齐？我正在使用宏伟的弹出窗口。我怎样才能做到这一点？目前它们像这样垂直居中：

Answer 1

如果您正在寻求有关 HTML 和 CSS 的帮助，您应该 post 您目前已经尝试过的方法或其他方法。在任何情况下，我都会假设您想要一个基于 HTML/CSS 的答案，并建议您使用 flex box 布局，如下所示：

.parent {
  display: flex;
  align-content: flex-end;
  align-items: baseline;
}

.red {
  height: 100px;
  width: 50px;
  background: red;
}

.blue {
  height: 200px;
  width:200px;
  background: blue;
}

.green {
  height: 50px;
  width: 80px;
  background: green;
}

<div class="parent">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
  </div>

IE9 或更早版本不支持 Flexbox，因此请注意这一点。

或者，您可以将 display: inline-block 和 vertical-align: bottom 添加到图像（示例中的 div）

.parent > div {
  display: inline-block;
  vertical-align: bottom;
}

.red {
  height: 100px;
  width: 50px;
  background: red;
}

.blue {
  height: 200px;
  width:200px;
  background: blue;
}

.green {
  height: 50px;
  width: 80px;
  background: green;
}

<div class="parent">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
  </div>

在放大弹出窗口中垂直对齐图像

Vertically aligning images in magnific popup

html

css

magnific-popup