带有 jsfiddle ex : not working: vertical align and using full width based on width percentage of two child containers 的 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>