将两个元素与HTML / CSS / JS串联在一起

Question

我试图用两个元素实现这个目标：

关键是如果一个div小于另一个div，它的移动方式使得它的y中心在另一个div的y中心是相同的。

但我找不到任何可以让我用CSS做的事。有什么建议吗？

我正在使用Bootstrap，并使用带有列和行的div。

Answer 1

您可以使用Flexbox执行此操作。这是Fiddle和Bootstrap

＆＃13;

＆＃13;

.content {
  display: flex;
  align-items: center;
}

.box {
  flex: 1;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

＆＃13;

<div class="content">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa doloribus mollitia reprehenderit, dignissimos temporibus. Quis sapiente nisi nemo earum, id fugit magnam eaque voluptas autem quos, nostrum, error. Voluptatibus, consequatur!</div>
  <div class="box">Lorem ipsum dolor.</div>
</div>

＆＃13;

＆＃13;

＆＃13;