时间戳

首页 > 解决方案 > 将文本与响应式图像的特定基线对齐

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

问题描述

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

我当前代码输出的屏幕截图

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

进一步来说：

  1. 即使在调整窗口大小时，也要将右侧徽标中的“di”（而不是“g”，因为它挂在较低位置）的底部与红线对齐。我知道这可以通过将图像的宽度更改为 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;
}

标签： htmlcssflexboxresponsive-designvertical-alignment

解决方案

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

  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>

推荐阅读