Question

我尝试了几天垂直对齐.sl_container 我尝试了vertical-align: middle，但这不起作用
如果我为.slideshow指定了高度和宽度，那么使用top: 50%;和transform: translateY(-50%);即可。 See here。
问题是，如果我移除滑块的高度和宽度以占用可用空间并进行调整，那么这将使内部div显示为向上移动。 See here

display: table-cell;不是一个选项，因为它会在父div的整个宽度的两侧而不是图像上显示箭头。

我之前尝试过flex，它会垂直对齐，但如果父DIV宽度大于子DIV，则由于某种原因它会转到

正如我所说的那样，我尝试了多种方法，没有一种方法能够在不打破箭头位置的情况下完成任务。

到目前为止我做了什么：JSFiddle
前面提到的设置在CSS部分中注释掉了。

对此有任何见解对于如何在不破坏整个幻灯片和箭头的情况下使其对齐的方式有用。

仅供参考：DIV的出血效果或图像像1-2px一样向下延伸到底部，这就是为什么我让每个DIV都着色以确定我是否可以修复它。我确定它有些愚蠢，如果你知道它是什么，请说出来。这并不重要，所以我并不在乎。的xD

Answer 1

使用slideshow将此内容添加到您的flexbox元素中。 Flex需要为IE11添加前缀（caniuse）

.slideshow {
    display: flex;
    align-items: center;
}

编辑：我在jsFiddle中启用了注释的高度和宽度样式，但无论宽度和高度如何，此方法都将垂直对齐slideshow子项。

Answer 2

尝试使用flexbox，它是垂直对齐最优雅的解决方案

E.g。

<div class='parentDiv'>
  <div class='childDiv'>
  </div>
</div>

.parentDiv {
   display: flex;
   align-items: center;
   justify-content: center;
}

看看 - ＆gt; here

DIV在另一个DIV内的垂直对齐

2 个答案: