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

Posted 2023-03-05

【中文标题】容器内浮动元素（导航控件）的垂直居中

【英文标题】：Vertical centering of float elements (navigation controls) within a container

【发布时间】：2018-08-28 06:46:56

【问题描述】：

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

这是我想要的布局：

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

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

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

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

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

使用 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 货物***的 CSS 规则。

【问题讨论】：

一个词 - flexbox - 不再需要浮动，然后你也可以进行垂直居中

display: flex-box; 不正确。正确的是display: flex;

【参考方案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>

【参考方案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>

我在答案中添加了 sn-p。

【讨论】：

静态位置为默认位置

谢谢@Christian，这很好用！不过有一件事，如果需要，我可以提出一个新问题，但是有没有办法让导航控件成为容器的高度？我希望 height: 100% 能实现这一点，但事实并非如此。全高控件更易于点击。

啊，看起来就像在导航元素中添加“align-self:stretch”一样简单。

是的。对齐自我是要走的路。 Yhx 表示接受