html - 如何在 Bootstrap 中垂直居中高度未知的 float 元素？

Question

相关 Bootply:http://www.bootply.com/OdVIzrxTV5

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

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

但在桌面上分开:

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

我在 A 和 C 部分使用 .pull-right 来完成这项工作，但是因为 Bootstrap 使用 float ，部分 <如上所示，strong>B 自动对齐到顶部。我真正想要的是 B 部分像这样垂直居中:

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

B 部分应相对于 A 和 C 垂直居中。我试过在行上应用 flexbox，但这会破坏布局。我也尝试过各种其他 CSS hack，但似乎没有一个以响应方式正确工作，扰乱了移动或桌面上的布局。

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

Answer 1

您还尝试过其他哪些 CSS 技巧？正如我所知，在使用 Bootstrap 的工厂版本(没有 sass/less)时，你真的必须对 CSS 选择器保持挑剔。

话虽这么说，也许 JavaScript 方法可能有所帮助!这是代码，我将 Bootstrap 您完成一些可以根据您的需要进行的更改。

变量断点

将此变量更改为为断点设置的任何像素。对于 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>