Align text between CSS grid areas

问题

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.

EDIT: 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>

Result:

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 Fiddle: https://jsfiddle.net/sores/m1uhLewy/7/

回答1:

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 */
}

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.

回答2:

One trick is to bring the font-size of each section to the other one in order to get the same basline. You can do it with by using pseudo element like below:

.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;
  font-size: calc(1em + 3vw);
  background-color: blue;
}
.timer-value {
  grid-area: timer;
  font-size: calc(1em + 9vw);
  background-color: green;
}
/**/
.timer-value:before {
   content:"";
   font-size: calc(1em + 3vw);
}
.timer-label:before {
   content:"";
  font-size: calc(1em + 9vw);
}

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

回答3:

in class .timer-label just change align-items: center; that's it

来源：https://stackoverflow.com/questions/59984970/align-text-between-css-grid-areas

标签

html

css

css-grid