CSS 网格的中心内容

Question

在这里与 CSS 网格斗争，该网格应由每行 7 个正方形组成，以构建日历样式布局。布局似乎没问题，但我无法将标题和副标题居中放置在项目中间。我尝试 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>

Answer 1

将 display: grid 或 display: flex 添加到 .grid-item class。

Firefox 中的 Web 检查器实际上直接提供了答案。

CSS 网格的中心内容

Center Content of CSS Grid

css

grid

layout