如何解决如何使用 CSS GRID 对齐项目或将自身与大文本对齐
我尝试了几个小时都没有成功...
我的目标是通过将大文本（主标题）粘贴到网格单元的底线来对齐。
我尝试了基线，并以容器上的对齐项目和 flex 结束，并在孩子上对齐 self 没有成功。另外，网上看到的一些关于行高和垂直对齐的相关内容......没有成功
你知道我做错了什么吗？
.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>解决方法
您的 h1 有默认保证金。将 margin-bottom: 0; 添加到您的 h1 应该可以解决问题。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。