如何使用 CSS GRID 对齐项目或将自身与大文本对齐

Question

我试了好几个小时都没成功...

我的目标是能够通过将大文本（主标题）粘贴到我的网格单元格的底线来对齐它。

我尝试了 baseline 和 flex end with align items on the container and align self on the child 但没有成功。另外，网上看到的一些关于行高和 vertical-align...whitout success

的相关内容

你知道我做错了什么吗？

enter image description here

.banner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(7, 1fr);
    background-color: rgb(255, 255, 255);
    height: 120vh;
    
}

.title{
    font-size: 6.3rem;
    font-family: 'Times New Roman', Times, serif;
    text-transform: uppercase;
    color: rgb(31, 89, 148);
    font-weight: bold;
    grid-area: 4/3/5/5;
    align-self: baseline;

   
}

<body class="container">
    <!--///////////////////////////////// début header//////////////////////////// -->
    <header class="banner">
        <h1 class="title">front pri</h1>
    </header>

</body>

</html>

Answer 1

您的 h1 有默认保证金。将 margin-bottom: 0; 添加到您的 h1 应该可以解决问题。

如何使用 CSS GRID 对齐项目或将自身与大文本对齐

How to align items or align self with big text using CSS GRID

css

alignment

css-grid