中心内部DIV垂直取决于最高的兄弟

Question

我有一个外部DIV（4）和三个内部DIV（1-3）。我不在乎宽度。这一切都与高度和垂直居中有关。我希望外部DIV（4）获得最高内部DIV的高度（行A中的2）。更重要的是，我希望其他内部DIV（A行中的1和3）垂直居中（相对于具有与最高内部DIV相同高度的外部DIV的高度）。

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

希望这有帮助！