在 CSS 网格区域之间对齐文本

Question

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/

Answer 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.

Answer 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>

Answer 3

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