内部 DIV 根据最高兄弟垂直居中

Question

我有一个外部 DIV (4) 和三个内部 DIV (1-3)。我不关心这里的宽度。一切都与高度和垂直居中有关。我想让外面的 DIV (4) 得到最高的内部 DIV （A 行中的 2）的高度。更重要的是，我希望其他内部 DIVs（A 行中的 1 和 3）垂直居中（相对于外部 DIV 的高度与最高内部 DIV).

DIV 的内容是动态的（比较 A 行和 B 行）因此我不知道哪个内部 DIV 最高。到目前为止，我使用 jQuery 解决方案来设置较小的 DIVs（红色标记）的边距顶部，但我现在想用普通的 CSS 解决它。

Answer 1

这很容易使用 flexbox - 属性 align-items: center 产生所需的结果 - 请参阅下面的演示：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}
.wrapper > div {
  border: 1px solid;
}

<div class="wrapper">
  <div class="one">Some text here</div>
  <div class="two">
    There is a lot of text here
    <br>There is a lot of text here
    <br>There is a lot of text here
    <br>
  </div>
  <div class="three">Some
    <br>text</div>
</div>

Answer 2

.outera {
    border:solid 1px #333;
}

.outera div {
  width:20px;
  border-radius: 16px;
  background-color:#212121;
  margin:10px;
  display:inline-block;
  vertical-align: middle;
}

.outera .a1 {
  height:20px;
}

.outera .a2 {
  height:80px;
}

.outera .a3 {
  height:50px;
}

<div class='outera'>
   <div class='a1'></div>
   <div class='a2'></div>
   <div class='a3'></div>
</div>

Answer 3

您可以使用 CSS Flexbox。

在下面的代码片段中，我使用了 display: inline-flex;。看看下面的片段：

body {
  padding: 20px;
}

.outer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
}

.inner {}

.a .element {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
}

.b .element {
  width: 20px;
  height: 50px;
  border-radius: 50%;
  background: green;
}

.c .element {
  width: 20px;
  height: 30px;
  border-radius: 50%;
  background: blue;
}

<div class="outer">
  <div class="inner a">
    <div class="element"></div>
  </div>
  <div class="inner b">
    <div class="element"></div>
  </div>
  <div class="inner c">
    <div class="element"></div>
  </div>
</div>

希望对您有所帮助！

内部 DIV 根据最高兄弟垂直居中

Center inner DIVs vertically depending on the highest sibling

html

css

vertical-alignment