将文本与响应式图像的特定基线对齐

Question

我无法将某些元素与 CSS/HTML 对齐。

Screenshot of my current code output

我的主要目标是即使在窗口调整大小时，左侧“第 2 行”的底部和右侧的徽标也保持在同一条红线上，并确保徽标的中心始终在中间垂直对齐屏幕。

更具体地说：

1. 在 即使在窗口调整大小时，红线右侧的徽标也是如此。我知道这个 可以通过将图像的宽度更改为 px 值来解决，但是 我希望徽标的大小根据宽度做出响应 窗口，使其在调整大小时变小，同时仍保持与左侧的“第 2 行”一致。
2. 调整绿色部分（.flex-container 类）的高度以始终适合里面的内容，使徽标（.middle 类）始终垂直对齐在窗口的中间（顶部：50vh） .我知道这可以通过将 .flex-container 高度更改为“auto”来解决，但是“g”开始悬挂的点消失了，我需要它可见。
3. 文本的字体大小和行高必须保持指定值。

这里是 codepen 的链接：https://codepen.io/yuvi100/pen/yLOdyzG

当前 HTML：

<div class="middle">
<div class="flex-container">
  <div class="flex-item left">
    <div class="inner-wrapper">
      <div class="flex-body">Line 1<br>Line 2</div>
    </div>
  </div>
  <div class="flex-item right">
    <div class="inner-wrapper">
      <div class="flex-img">
        <img src='https://yuvalashkenazi.com/logo.png'>
      </div>
      <div class="flex-body"></div>
    </div>
  </div>
</div>
</div>

当前的 CSS：

body {
  background: orange;
}

.middle {
  position: absolute;
  top: 50vh;
  transform: translateY(-50%);
}

.left {
  float: left;
  width: 20vw;
}

.right {
  float: right;
  width: 80vw;
}

img {
  margin-bottom: -40px;
  width: 15vw;
}

.flex-container {
  overflow: hidden;    
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;
  width: 100vw;
  height: 320px;
  background-color: green;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.inner-wrapper {
  display: inline-block;
  width: 100%;
  background-color: cornflowerblue;
}

.flex-body {
  border-bottom: 4px solid red;
  text-align: left;
  color: white;
  font-size: 16pt;
  line-height: 18pt;
}
.flex-img {
  text-align: right;
}

Answer 1

一些小的改动会让你得到非常接近你正在寻找的东西：

1. 为图像上的margin-bottom 值使用变量值。我在示例中有3.2%，但您可以对其进行调整以获得您想要的。
2. 使用弹性框的属性设置沿水平维度定位和调整元素的大小。 （当然，如果您设置了flex-direction: column，请沿垂直维度设置。）这里，我使用flex-grow 来动态调整框的大小。
3. 我可以对你的数字 2 有几种不同的解释。不过，在所有情况下，你都可以简单地将你的高度设置为 auto 并使用正填充值来抵消负边距值（我使用了 2.5% )，以便扩展容器的高度以在徽标中包含下降器。我已将填充应用于.inner-wrapper 并将其放在顶部和底部。这会调整绿色和蓝色的大小以包含徽标。如果您希望徽标中下降器的背景为绿色，则将填充应用于.flex-container。您还可以将任何填充应用到您喜欢的顶部。这不是一个完美的解决方案，因为填充表示为整个徽标的百分比，而不仅仅是下降器，因此随着屏幕变小，下降器下方的间隙会变大。如果这还不足以满足您的需求，您可以尝试在徽标下方使用网格和 div。

body {
  background: orange;
}

.middle {
  position: absolute;
  top: 50vh;
  transform: translateY(-50%);
}

.left {
  flex-grow: 1;
}

.right {
  flex-grow: 4;
}

img {
  margin-bottom: -3.2%;
  width: 15vw;
}

.flex-container {
  overflow: hidden;    
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;
  width: 100vw;
  height: auto;
  background-color: green;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.inner-wrapper {
  display: inline-block;
  width: 100%;
  padding: 0 0 2.5% 0;
  background-color: cornflowerblue;
}

.flex-body {
  border-bottom: 4px solid red;
  text-align: left;
  color: white;
  font-size: 16pt;
  line-height: 18pt;
}

.flex-img {
  text-align: right;
}

<div class="middle">
  <div class="flex-container">
    <div class="flex-item left">
      <div class="inner-wrapper">
        <div class="flex-body">Line 1<br>Line 2</div>
      </div>
    </div>
    <div class="flex-item right">
      <div class="inner-wrapper">
        <div class="flex-img">
          <img src='https://yuvalashkenazi.com/logo.png'>
        </div>
        <div class="flex-body"></div>
      </div>
    </div>
  </div>
</div>