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

Question

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

Screenshot of my current code output

我的主要objective是即使在window调整大小的时候，也让左边的“Line 2”底部和右边的logo在同一条红线上，并且保证居中徽标的始终在屏幕中间垂直对齐。

更具体地说：

将“di”（不是“g”，因为它下垂）的底部对齐徽标右侧的红线甚至 window 调整大小。我知道这个可以通过将图像的宽度更改为 px 值来解决，但是我希望徽标的大小根据 window 以便它在调整大小时变小，同时仍然与左侧的“第 2 行”保持一致。
调整绿色部分（.flex-container class）的高度，使其始终适合里面的内容，使logo（.middle class）始终垂直对齐window 的中间（顶部：50vh）。我知道这可以通过将 .flex-container 高度更改为“自动”来解决，但是“g”开始悬挂的点消失了，我需要它可见。
文本的字体大小和行高必须保持指定值。

这里是 link 代码笔：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

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

为图像上的 margin-bottom 值使用可变值。我在示例中有 3.2%，但您可以调整它以获得您想要的。
使用弹性框的属性设置沿水平方向定位元素并调整其大小。（当然，如果您设置了 flex-direction: column，请沿着垂直维度进行设置。）在这里，我使用 flex-grow 来动态调整框的大小。
我可以想到对您的数字 2 的几种不同解释。不过，在所有情况下，您只需将高度设置为 auto 并使用正填充值来抵消负边距值（我used 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>

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

Aligning text to a specific baseline of a responsive image

html

css

vertical-alignment

flexbox

responsive-design