将 div 与 Bootstrap 列中的相邻 div 对齐

如何解决将 div 与 Bootstrap 列中的相邻 div 对齐

是否可以将 Bootstrap 列中的内容与另一个 div 的内容垂直对齐？

我有两列，A 和 B，它们彼此相邻。 单击 B 列中的项目时，A 列中会出现一个单词列表。 我希望 A 中的这个词集合以 B 中选定的词为中心垂直居中。

这是一个 JSfiddle，它包含了正在发生的事情的基本概念，没有垂直居中

https://jsfiddle.net/so4902r8/5/

HTML

<div class="row">
  <div class="col-2 offset-4">   
    <div id="wordList1">
      [text]
    </div>
    <div id="wordList2">
      [text]
    </div>
  </div>
  <div id="clickMes" class="col-2">
    <div id="clickMe1">
      <a onClick="clickMe1()">Click Me 1</a>
    </div>
    <div id="clickMe2">
      <a onClick="clickMe2()">Click Me 2</a>
    </div>
  </div>
</div>

JS

function clickMe1() {
var x = document.getElementById("wordList1");
  if (x.style.display === "none") {
x.style.display = "block";
document.getElementById("wordList2").style.display = "none";
  } else {
x.style.display = "none";
  }
}


function clickMe2() {
var x = document.getElementById("wordList2");
  if (x.style.display === "none") {
    x.style.display = "block";
    document.getElementById("wordList1").style.display = "none";
  } else {
    x.style.display = "none";
  }
}

解决方法

通常这将是 Vertical Align Center in Bootstrap 和 Bootstrap Center Vertical and Horizontal Alignment

的副本

但是，此 CSS 规则应用的顶部填充会阻止 align-items-center 按预期工作...

.clickMes {
  padding-top: 50px;
}

因此，删除顶部填充并在行上使用 align-items-center。

Demo