垂直对齐内的css垂直对齐

Question

我的目标是创建 3 个垂直对齐的 div，其中一个 div 有一个父级高度的垂直条 (border-right)。父级可以有一个固定的高度，这反过来应该可以使用 css 使用垂直对齐（我知道 flexbox 可以解决它，但我真的在这里询问垂直对齐行为）。

以下 sn-p 显示了我不理解的 CSS 行为：

<div class="parent">
  <div class="a">
    Part A
  </div>
  <div class="b">
    <div>
      Part B<br>Part B  
    </div>

  </div>
  <div class="c">
    <span>Part C</span>
  </div>
</div>

还有css

.parent {
  height: 50px;
  display: inline-block;
}
.a {
  display: inline-block;
  vertical-align: middle; 
}

.b {
  display: inline-block;
  vertical-align: middle;
}

.c {
  display: inline-block;
  vertical-align: middle;
  border-right: 1px solid black;
  padding-right: 10px;
  height: 50px;
}

.span {
  display: inline-block;
  vertical-align: middle;

}

我期待 div C 垂直对齐，但它在顶部对齐。如果我从类.c 中删除height 属性，则对齐正确但垂直条太短。我为这个问题创建了以下小提琴： http://jsfiddle.net/04e2ckxm/2/

Answer 1

（我知道 flexbox 可以解决这个问题，但我真的在问这里的垂直对齐行为）。

在您的示例中，文本垂直居中，因为它的父级是文本的高度：

vertical-align: middle                  vertical-align: bottom               vertical-align: top

body {
  background: #FFF;
}
.parent {
  display: inline-block;
  padding-right: 10px;
  vertical-align: top;
  margin: 40px;
}
.parent > div {
  display: inline-block;
  background: #F8BBD0;
}
.top > div {
  vertical-align: top;
}
.middle > div {
  vertical-align: middle;
}
.bottom > div {
  vertical-align: bottom;
}

<div class="parent middle">
  <div class="a">
    Part A
  </div>
  <div class="b">
    Part B
    <br>Part B
  </div>
  <div class="c">
    Part C
    <br>Part C
    <br>Part C
  </div>
</div>
<div class="parent bottom">
  <div class="a">
    Part A
  </div>
  <div class="b">
    Part B
    <br>Part B
  </div>
  <div class="c">
    Part C
    <br>Part C
    <br>Part C
  </div>
</div>
<div class="parent top">
  <div class="a">
    Part A
  </div>
  <div class="b">
    Part B
    <br>Part B
  </div>
  <div class="c">
    Part C
    <br>Part C
    <br>Part C
  </div>
</div>

当你给元素一个固定的高度时，块是垂直居中的，不是它们的内容：

vertical-align: middle                  vertical-align: bottom               vertical-align: top

body {
  background: #FFF;
}
.parent {
  display: inline-block;
  padding-right: 10px;
  vertical-align: top;
  margin: 40px;
}
.parent > div {
  display: inline-block;
  background: #F8BBD0;
}
.top > div {
  vertical-align: top;
}
.middle > div {
  vertical-align: middle;
}
.bottom > div {
  vertical-align: bottom;
}
.c {
  height: 100px;
}

<div class="parent middle">
  <div class="a">
    Part A
  </div>
  <div class="b">
    Part B
    <br>Part B
  </div>
  <div class="c">
    Part C
    <br>Part C
    <br>Part C
  </div>
</div>
<div class="parent bottom">
  <div class="a">
    Part A
  </div>
  <div class="b">
    Part B
    <br>Part B
  </div>
  <div class="c">
    Part C
    <br>Part C
    <br>Part C
  </div>
</div>
<div class="parent top">
  <div class="a">
    Part A
  </div>
  <div class="b">
    Part B
    <br>Part B
  </div>
  <div class="c">
    Part C
    <br>Part C
    <br>Part C
  </div>
</div>

为了进一步说明这一点，我们可以给每个 div 一个不同的固定高度：

vertical-align: middle                   vertical-align: bottom               vertical-align: top

body {
  background: #FFF;
}
.parent {
  display: inline-block;
  padding-right: 10px;
  vertical-align: top;
  margin: 40px;
}
.parent > div {
  display: inline-block;
  background: #F8BBD0;
}
.top > div {
  vertical-align: top;
}
.middle > div {
  vertical-align: middle;
}
.bottom > div {
  vertical-align: bottom;
}
.a {
  height: 50px;
}
.b {
  height: 100px;
}
.c {
  height: 200px;
}

<div class="parent middle">
  <div class="a">
    Part A
  </div>
  <div class="b">
    Part B
  </div>
  <div class="c">
    Part C
  </div>
</div>
<div class="parent bottom">
  <div class="a">
    Part A
  </div>
  <div class="b">
    Part B
  </div>
  <div class="c">
    Part C
  </div>
</div>
<div class="parent top">
  <div class="a">
    Part A
  </div>
  <div class="b">
    Part B
  </div>
  <div class="c">
    Part C
  </div>
</div>

Answer 2

只需将所有子 <div> 的 CSS 从 display: inline-block 更改为 display: table-cell。

这会产生以下（期望的）结果：

请参阅JSfiddle.net 上的工作示例。