时间戳

首页 > 解决方案 > 将 div 与 Bootstrap 列中的相邻 div 对齐

twitter-bootstrap - 将 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";
  }
}

标签： twitter-bootstrapalignmentmultiple-columnsbootstrap-5

解决方案

通常，这将是 Bootstrap 中的Vertical Align Center和Bootstrap Center Vertical and Horizo​​ntal Alignment的副本

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

.clickMes {
  padding-top: 50px;
}

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

演示

推荐阅读