容器内浮动元素（导航控件）的垂直居中

Question

我读过 How can I center two floated elements within a container? 和朋友；前者指的是水平居中，而朋友指的是非浮动儿童 AFAICT。我为什么要使用浮动？好吧，继续阅读...

这是我想要的布局：

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

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

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

没有浮动，导航元素和轮播堆叠起来（如预期的那样）：

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

使用 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

只需使用 Flexbox...垂直居中对齐使用 align-items: center 水平居中使用 justify-content: center

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

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

.nav {
  position: relative;
  border: 1px solid green;
  width: 5%;
  height: 100%;
  text-align: center;
}

.carousel {
  position: relative;
  border: 1px solid red;
  width: 90%;
  display: flex;
  justify-content: center;
}

img {
  background: lightblue;
  display: block;
  max-width: 100%;
}

.image {
  position: relative;
  padding: 6px 12px;
  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>

Answer 2

您还必须将 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>

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

容器内浮动元素（导航控件）的垂直居中

Vertical centering of float elements (navigation controls) within a container

css

layout

css-float

centering

flexbox