在CSS网格区域之间对齐文本 [英] Align text between CSS grid areas

问题描述

我有一个CSS网格布局-对于这个问题，我将使用一个简单的示例-> 1行4列（2个区域）。
在网格区域中，我有一个具有不同字体大小的文本。我想使文本彼此对齐，但无法弄清楚。
我没有找到类似的问题，但是也许我搜索了错误的短语。

I have a CSS grid layout - for this question I will use a simple example -> 1 row, 4 columns (2 areas). In grid areas, I have a text with different font sizes. I would like to align the text to each other but can't figure it out. I didn't find similar questions but maybe I searched for wrong phrases.

编辑：两者必须与底线对齐。计算字体大小。代码和示例已修改。

Both must be aligned to the bottom line. Font-size is calculated. Code and example have been modified.

.timer {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-areas: "status status status timer";
}

.timer-label {
  grid-area: status;
  display: flex;
  font-size: calc(1em + 3vw);
  background-color: blue;
  align-items: flex-end;
}

.timer-value {
  grid-area: timer;
  font-size: calc(1em + 9vw);
  background-color: green;
}

<div class="timer">
  <div class="timer-label">
    <span>Processing...</span>
  </div>
  <div class="timer-value">
    <span>00:55</span>
  </div>
</div>

结果：

预期结果：
希望将正在处理...文本的底部与计时器的底部对齐，使两者位于同一行（打印屏幕上的红线）。

Expected result: I would like to have the bottom of "Processing..." text aligned to the bottom of the timer so both are in the same line (red line on print screen).

JS小提琴：
https://jsfiddle.net/sores/m1uhLewy/7/

推荐答案

在CSS代码中进行以下更改

Make Following change in your CSS Code

.timer {
    align-content: start;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas: "status status status timer";
}

.timer-label {
    grid-area: status;
    display: flex;
    font-size: 30px;
    background-color: blue;
    align-items: flex-end;
    line-height: 70px; /* Add this Line */
}

.timer-value {
    grid-area: timer;
    font-size: 75px;
    background-color:green;
    line-height: 70px; /* Add this Line */
}

说明：问题是您的字体大小是对于处理文本和引起高度问题的时间有所不同，可以指定line-height属性并使设计一致。您可以根据自己的喜好调整行高的值。

Explanation: The problem is your font size is different for the Processing text and the time causing the issue in height, You can specify the line-height property and make the design consistent. You can adjust the value of line height based on your preference.

这篇关于在CSS网格区域之间对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！