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

问题描述

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

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

更具体地说：

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

以下是指向密码笔的链接：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;
}

解决方法

一些小的更改将为您提供与所需内容非常接近的东西：

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

.flex-container

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;
}

flexbox html responsive-design vertical-alignment