带有jsfiddle ex的Html css:不工作:垂直对齐，并使用基于两个子容器宽度百分比的全宽

Question

https://jsfiddle.net/3Lthpf72/5/

带jsfiddle ex的Html-css：不工作：垂直对齐并使用基于两个子容器宽度百分比的全宽

当我使两个子容器加起来达到父容器的宽度百分比时，它会向下折叠。此外，垂直对齐的中间位于底部，而不是中间。

有什么想法吗？

.payee.list-item {
  border: 1px solid red;
  height: 100%;
  width: 300px;
}
.list-item-content {
  display: inline-block;
  border: 1px solid blue;
  width: 80%
}
.payee.list-item>img {
  border: 1px solid green;
  height: 45px;
  display: inline-block;
  width: 17%;
  vertical-align: middle;
}

<div class="payee list-item">
  <img src="/Image/PayeeBillPayAccountPortrait/832">
  <div class="list-item-content">
    <h4>Colonel Sanders!</h4>
    <h3>Colonel Sanders</h3>
  </div>
</div>

Answer 1

你想做这样的事情吗？

.payee.list-item {
  border: 1px solid red;
  height: 100%;
  width: 300px;
  display: inline-block;
  position: relative;
}
.list-item-content {
  float: right;
  border: 1px solid blue;
  width: 80%
}
h3, h4 {
  width: 50%;
  float: left;
  box-sizing: border-box;
  padding: 6px;
  }
h3{background: lightgray;}
h4{background: gray;}
.payee.list-item>img {
  border: 1px solid green;
  max-height: 45px;
  width: 17%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="payee list-item">
  <img src="https://static.pexels.com/photos/6555/nature-sunset-person-woman.jpg">
  <div class="list-item-content">
    <h3>Colonel Sanders</h3>
    <h4>Colonel Sanders!</h4>
  </div>
</div>