如何在Bootstrap中垂直居中未知高度的浮动元素？

Posted 2023-03-06

【中文标题】如何在Bootstrap中垂直居中未知高度的浮动元素？

【英文标题】：How to vertically center a floating element of unknown height in Bootstrap?

【发布时间】：2017-01-18 04:35:04

【问题描述】：

相关引导层：http://www.bootply.com/OdVIzrxTV5

我正在 Bootstrap 中创建一个布局，其中部分在移动设备上相互堆叠：

|---|
| A |
|---|
| B |
|---|
| C |
|---|

但在桌面上分开：

|---|    |---|
| B |    | A |
|---|    |---|
         | C |
         |---|

我在 A 和 C 部分使用 .pull-right 来完成这项工作，但由于 Bootstrap 使用浮动，所以部分 B 是如上所示，自动对齐到顶部。我真正想要的是 B 部分像这样垂直居中：

         |---|
|---|    | A |
| B |    |---|
|---|    | C |
         |---|

B 部分应相对于A 和C 垂直居中。我尝试在行上应用 flexbox，但这会破坏布局。我还尝试了各种其他 CSS hack，但似乎都无法以响应方式正常工作，从而破坏了移动设备或桌面上的布局。

当垂直居中的部分 B 高度未知时，是否有任何可靠、响应迅速的解决方案？如果有帮助，B 部分将成为图像元素。

【参考方案1】：

您还尝试过哪些其他 CSS hack？只是好奇，我知道在使用 Bootstrap 的工厂版本（没有 sass/less）时，您确实必须对 CSS 选择器挑剔。

话虽如此，也许 javascript 方法可能会有所帮助！这是代码，我将引导您完成一些更改以满足您的需求。

变量breakpoint

将此变量更改为为断点设置的任何像素。对于 Bootstrap，xs 选择器默认在 768 处启动。如果您想在其他断点处执行操作，可以添加多个断点并使用更多 if/else 语句。

第一个if

这将在页面加载时触发，并立即测试屏幕的宽度，并在需要时更改边距。

window.resize()

每当调整窗口大小时，类似的 if 语句都会关闭并重新计算边距。如果您输入一些文本并更改高度，您会看到它保持居中。如果由于某种原因将浏览器的大小调整到低于断点的位置，则只需将边距更改为继承。

一些变化

您可能会注意到 div 略低于一半。这可能只是关于 jQuery 如何检索高度的数学错误。只需添加您想要向上或向下编辑的任何常量。

// Where 20 is in pixels
var topMargin = (totalMargin / 2) - 20;

如果您想将左侧 div 居中使其始终位于 A 和 C 部分之间，您只需更改 topMargin 计算以使用高度A div。

如果您有任何问题，请告诉我！

$(document).ready(function() 
  var breakpoint = 768;

  if ($(window).width() > breakpoint) 
    var totalMargin = $(window).height() - $('#vertCenter').height();
    var topMargin = totalMargin / 2;
    $('#vertCenter').css('margin-top', topMargin);
  

  $(window).resize(function()
    if ($(window).width() > breakpoint) 
      var totalMargin = $(window).height() - $('#vertCenter').height();
      var topMargin = totalMargin / 2;
    
      $('#vertCenter').css('margin-top', topMargin);
     else 
      $('#vertCenter').css('margin-top', 'inherit');
    
  );
);

.section-a,
.section-c 
  font-size: 2em;

.section-b 
  font-size: 4em;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="test"></div>

    <div class="col-xs-12 col-sm-6 pull-right">
      <div class="section-a well well-lg">A</div>
    </div>

    <div class="col-xs-12 col-sm-6">
      <div id="vertCenter" class="section-b well well-lg">B</div>
    </div>

    <div class="col-xs-12 col-sm-6 pull-right">
      <div class="section-c well well-lg">C</div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：

感谢您的回答，但如果可能的话，我正在寻找仅使用 CSS 的解决方案。为响应式框架编写依赖于屏幕大小的 JS 代码感觉太像了。如果归根结底，并且看起来可能，我会采用像您这样的解决方案。

介意指向您看过的其他一些关于纯 CSS 垂直对齐的文章吗？实际上，我过去也遇到过类似的问题，也从来没有真正想出一个好的答案，所以我也很高兴有另一个解决方案。

我发现this website 是一个非常有用的资源。