【发布时间】：2021-01-09 01:26:05
【问题描述】：
在这里使用每行应包含 7 个方格的 CSS 网格来构建日历样式布局。布局似乎还可以，但我无法将标题和副标题放在项目中间。我尝试了 margin:auto 和 vertical-align:middle、wrapper span 或 div 来对齐里面的 h1/h2。请参阅下面的工作示例，文本粘贴在项目的顶部。
非常欢迎任何建议！
fj
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
color: white;
}
.grid-container {
display: grid;
grid-gap: 1px;
grid-template-columns: repeat(7, 1fr);
}
.grid-item {
background-image: url(https://images.pexels.com/photos/787961/pexels-photo-787961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
align-content: center;
height: 14vw;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
</div>
</body>
</html>【问题讨论】：