css - 容器内 float 元素(导航控件)的垂直居中

Question

我读过 How can I center two floated elements within a container?和 friend ;前者指的是水平居中，而 friend 指的是非 float child AFAICT。我为什么要使用 float ？好吧，继续阅读...

这是我想要的布局:

+-------+-------------------+-------+
|       | ##### ##### ##### |       |
| [ < ] | ##### ##### ##### | [ > ] |
|       | ##### ##### ##### |       |
+-------+-------------------+-------+

< 和 > 是导航箭头； # 是在光滑的轮播中动态加载的图像缩略图。这些图像的宽度和高度都相同，但轮播可以配置为显示三个以上的此类图像。此外，整个事情当然需要响应 :)

我的问题是我无法在外部容器内将包含导航元素的元素垂直居中。 float: left/none, display: flex-box, overflow: auto/hidden, margin: auto 等等的各种组合都试过了，我已经束手无策了。

没有 float ，导航元素和轮播堆叠起来(如预期的那样):

+-------+-------------------+-------+
| [ < ]                             | 
| ##### ##### #####                 |
| ##### ##### #####                 |
| ##### ##### #####                 |
| [ > ]                             |
+-------+-------------------+-------+

使用 float: left 时，导航元素拒绝垂直居中 - 看起来这些元素没有接收到容器的完整高度(导航元素是包含跨度的 div):

+-------+-------------------+-------+
| [ < ] | ##### ##### ##### | [ > ] |
|       | ##### ##### ##### |       |
|       | ##### ##### ##### |       |
+-------+-------------------+-------+

这是基本(非工作)代码。为了便于测试，我已经去掉了旋转木马。在下面的代码中，我使用 javascript 来模拟加载(远程)图像。

$('document').ready(function() {
  setTimeout(function() {
    $('img').css({
      width: '150px',
      height: '110px'
    });
  }, 1500);
});

.outer {
  position: relative;
  border: 1px solid black;
}

.nav {
  position: relative;
  border: 1px solid green;
  width: 4%;
  height: 100%;
  float: left;
  display: flex-box;
  align-content: center;
}

.carousel {
  position: relative;
  border: 1px solid red;
  width: 90%;
}

img {
  background: lightblue;
  display: block;
}

.image {
  position: relative;
  float: left;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  height: auto;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="left nav">
    <span class="left nav-arrow">&lt;</span>
  </div>
  <div class="carousel">
    <div class="image"> <img class="img1"> </div>
    <div class="image"> <img class="img2"> </div>
    <div class="image"> <img class="img3"> </div>
  </div>
  <div class="right nav">
    <span class="right nav-arrow">&gt;</span>
  </div>
</div>

我不反对 JS 解决方案，但如果可能的话我更喜欢纯 CSS 解决方案。另外，我白天不是 CSS 开发人员，所以这里可能有一些 ahem cargo-cult CSS 规则。

Answer 1

您还必须将 display: flex 设置为您的外部元素。我更新了你的 fiddle并简化了CSS。

$('document').ready(function() {
  setTimeout(function() {
    $('img').css({
      width: '150px',
      height: '110px'
    });
  }, 1500);
});

.outer {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav {
  border: 1px solid green;
  margin: 0 5px;
}

.carousel {
  border: 1px solid red;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

img {
  background: lightblue;
}

.image {
  padding: 6px 12px;
  border: 1px solid black;
}

.nav-arrow {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">

  <div class="left nav">
    <span class="left nav-arrow">&lt;</span>
  </div>

  <div class="carousel">

    <div class="image"> <img class="img1"> </div>
    <div class="image"> <img class="img2"> </div>
    <div class="image"> <img class="img3"> </div>

  </div>

  <div class="right nav">
    <span class="right nav-arrow">&gt;</span>
  </div>

</div>

我将片段添加到我的答案中。