Question

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

这是我想要的布局：

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

＆lt;和＆gt;是导航箭头; ＃是在光滑的轮播中动态加载的图像缩略图。图像的宽度和宽度都相同。高度，但旋转木马可以配置为显示三个以上这样的图像。此外，整个事情当然需要回应：）

我的问题是我无法将包含导航元素的元素垂直居中于外部容器中。浮动的各种组合：左/无，显示：弹性框，溢出：自动/隐藏，边距：自动等等已经尝试过，我在我的智慧结束。

没有浮动，导航元素和轮播堆叠（按预期）：

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

使用float：left，导航元素拒绝垂直居中 - 看起来这些元素不会接收容器的整个高度（导航元素是包含跨度的div）：

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

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 1

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

我在我的回答中添加了摘录。

容器内

2 个答案: