css垂直对齐内垂直对齐

Question

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

以下代码段显示了我不理解的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垂直对齐，但它在顶部对齐。如果我从类height中删除.c属性，则对齐方式正确，但竖线太短。我为这个问题创建了以下小提琴： 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

只需将所有儿童docment.getElementById("YourLinkTagID").href = myURL的CSS从<div>更改为display: inline-block。

这会创建以下（所需）结果：

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