html - 无法在 CSS 中使用网格使元素居中
问题描述
我刚刚使用 html 和 css 制作了一个卡片组件，但在使用网格时无法居中图像。该页面在更大的屏幕上很好。对于更大的屏幕，我使用弹性框来对齐信息和图像，对于移动视图，我使用网格布局来垂直对齐事物并使其居中，我使用justify-content: center属性，当我切换到移动视图时信息部分居中，但不是图像。我还将媒体查询用于响应式设计。
这是我的CSS代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 15px;
}
.attribution {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1rem;
color: white;
}
.container{
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: hsl(233, 47%, 7%);
}
.card
{
font-size: 1rem;
background-color: hsl(244, 38%, 16%);
display: flex;
width: 70vw;
height: 50vh;
box-shadow: 0 10px 20px -6px #000;
}
a{
text-decoration: none;
}
.card1, .card2
{
flex: 1;
}
.card2{
height: 50vh;
background-image: url(../images/image-header-desktop.jpg);
background-size: 100% 100%;
}
.card1a, .card2a, .card3a
{
font-size: 1rem;
}
.card1{
display: grid;
color: hsl(0, 0%, 100%);
padding-left: 4em;
padding-right: 5em;
padding-top: 3em;
padding-bottom: 3em;
grid-template-rows: 10em 9em ;
}
.insights
{
color: hsl(277, 64%, 61%);
}
.card1a{
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 3rem;
}
.card2a
{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 1rem;
width: 60%;
color: hsla(0, 0%, 100%, 0.75);
}
.card3a
{
display: flex;
justify-content: space-between;
width: 55%;
font-family: 'Lexend Deca', sans-serif;
}
.info
{
color: hsla(0, 0%, 100%, 0.6);
}
@media (max-width: 700px)
{
.card1a, .card2a, .card3a
{
border: 2px solid green;
padding-bottom: 1em;
}
.card
{
display: grid;
justify-content: center;
width: 70vw;
height: 90vh;
border: 2px solid red;
}
.card1a
{
font-size: 2rem;
justify-content: center;
width: 60vw;
text-align: center;
}
.container
{
width: 100vw;
height: 100vh;
}
.card2a{
font-size: 0.9rem;
width: 44vw;
text-align: center;
}
.card3a{
width: 100%;
display: grid;
justify-content: center;
}
.card2{
width: 70vw;
height: 35vh;
background-image: url(../images/image-header-mobile.jpg);
background-size: 100% 100%;
grid-row: 1;
border: 2px solid green;
}
.info
{
font-size: 0.8rem;
}
.card1
{
grid-template-rows: auto ;
place-items: center;
}
.inf
{
padding-bottom: 0.7em;
}
}
这是我的html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Stats preview card component</title>
<link rel="stylesheet" type="text/css" href="./style/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card1">
<div class="card1a">
Get <span class="insights">insights</span> that help your business grow.
</div>
<div class="card2a">
Discover the benefits of data analytics and make better decisions regarding revenue, customer
experience, and overall efficiency.
</div>
<div class="card3a">
<div class="inf">10k+ <br> <span class="info">companies</span></div>
<div class="inf">314 <br> <span class="info">templates</span></div>
<div class="inf">12M+ <br> <span class="info">queries</span></div>
</div>
</div>
<div class="card2">
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Abhijeet John Kujur</a>.
</div>
</body>
</html>
解决方案
尝试添加justify-items: center;媒体查询
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 15px;
}
.attribution {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1rem;
color: white;
}
.container{
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: hsl(233, 47%, 7%);
}
.card
{
font-size: 1rem;
background-color: hsl(244, 38%, 16%);
display: flex;
width: 70vw;
height: 50vh;
box-shadow: 0 10px 20px -6px #000;
}
a{
text-decoration: none;
}
.card1, .card2
{
flex: 1;
}
.card2{
height: 50vh;
background-image: url(../images/image-header-desktop.jpg);
background-size: 100% 100%;
}
.card1a, .card2a, .card3a
{
font-size: 1rem;
}
.card1{
display: grid;
color: hsl(0, 0%, 100%);
padding-left: 4em;
padding-right: 5em;
padding-top: 3em;
padding-bottom: 3em;
grid-template-rows: 10em 9em ;
}
.insights
{
color: hsl(277, 64%, 61%);
}
.card1a{
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 3rem;
}
.card2a
{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 1rem;
width: 60%;
color: hsla(0, 0%, 100%, 0.75);
}
.card3a
{
display: flex;
justify-content: space-between;
width: 55%;
font-family: 'Lexend Deca', sans-serif;
}
.info
{
color: hsla(0, 0%, 100%, 0.6);
}
@media (max-width: 700px)
{
.card1a, .card2a, .card3a
{
border: 2px solid green;
padding-bottom: 1em;
}
.card
{
display: grid;
justify-items: center;
justify-content: center;
width: 70vw;
height: 90vh;
border: 2px solid red;
}
.card1a
{
font-size: 2rem;
justify-content: center;
width: 60vw;
text-align: center;
}
.container
{
width: 100vw;
height: 100vh;
}
.card2a{
font-size: 0.9rem;
width: 44vw;
text-align: center;
}
.card3a{
width: 100%;
display: grid;
justify-content: center;
}
.card2{
width: 70vw;
height: 35vh;
background-image: url(../images/image-header-mobile.jpg);
background-size: 100% 100%;
grid-row: 1;
border: 2px solid green;
}
.info
{
font-size: 0.8rem;
}
.card1
{
grid-template-rows: auto ;
justify-items: center;
}
.inf
{
padding-bottom: 0.7em;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Stats preview card component</title>
<link rel="stylesheet" type="text/css" href="./style/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card1">
<div class="card1a">
Get <span class="insights">insights</span> that help your business grow.
</div>
<div class="card2a">
Discover the benefits of data analytics and make better decisions regarding revenue, customer
experience, and overall efficiency.
</div>
<div class="card3a">
<div class="inf">10k+ <br> <span class="info">companies</span></div>
<div class="inf">314 <br> <span class="info">templates</span></div>
<div class="inf">12M+ <br> <span class="info">queries</span></div>
</div>
</div>
<div class="card2">
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Abhijeet John Kujur</a>.
</div>
</body>
</html>推荐阅读
- sql - 如何根据查询中的行多次替换？
- javascript - 反应钩子，状态没有正确改变
- regex - elasticsearch 正则表达式模式
- r - y 轴和数据点的单独刻度颜色
- windows - 如何将 mailto 链接与 Windows 10 上的 PWA 应用关联？
- mysql - 返回在 MySql 中不包含单词的行的查询
- android - 工具栏下拉时如何防止 SelectionTracker 意外选择？
- ruby-on-rails - Sidekiq 服务似乎“休眠”，与交互时唤醒
- c# - Azure 搜索通配符和破折号
- django - 如何从 celery 任务中返回 django 视图？