如何解决将所有项目居中对齐
我在对齐图像以对齐中心时遇到问题。我究竟做错了什么？ 我不确定我是否完全弄乱了这个网格？我试过 justify-content 但它不起作用。我不确定是否应该以不同的方式设置网格，然后添加 justify-content。任何帮助将不胜感激。
<!doctype html>
<html>
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>Untitled Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://neil.production.na3.netsuitestaging.com/scs/extensions/shopping_1.css?t=1600362040014">
<style>
.grid-container img {width: 50%;}
.grid-container {max-width:970px; width:100% }
.CENTER {
display: grid;
justify-content: center;
}
.grid-container .AboutUs2 h1
{font-family: "Oswald",sans-serif; font-weight: 500; font-size: .978em; margin-top: 0px; text-align: left; padding-left: 20px;}
.grid-container .AboutUs2 p{ display:block;font-family: 'Lato',sans-serif; font-weight: 400; font-size: .978em; text-align: left; padding-left: 20px;}
.BoxText {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: .25fr;
grid-gap: 0px 10px;
grid-template-areas:
"BoxText1 BoxText2 BoxText3";
grid-area: BoxText;
margin-bottom: 50px;
}
.BoxText1 { grid-area: BoxText1; }
.BoxText2 { grid-area: BoxText2; }
.BoxText3 { grid-area: BoxText3; }
@media only screen and (max-width: 480px) {
.BoxText{
display:none;
}}
@media only screen and (max-width: 480px) {
.OneBox{
display:block;
width: 65%;
margin: auto;
margin-bottom: 30px}}
@media only screen and (min-width: 480px) {
.OneBox{ display:none;}}
.cards {
display: grid;
width: 100%;
margin: 0 auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1.25fr;
grid-gap: 0px 10px;
align-items: start;
margin-bottom: 50px;
grid-template-areas:
"card1 card2 card3 card4";
grid-area: cards;}
.card1 { grid-area: card1; }
.card2 { grid-area: card2; }
.card3 { grid-area: card3; }
.card4 { grid-area: card4; }
@media only screen and (max-width: 480px) {
.card1{
margin-bottom:40px; }}
@media only screen and (max-width: 480px) {
.cards{
grid-template-columns: 1fr 1fr;
grid-template-rows: 1.25fr 1.25fr;
height: auto;
margin: auto;
margin-bottom: 40px;
grid-template-areas:
"card1 card2"
"card3 card4";
}}
.cards img {
max-width: 250px;
}
.text {
padding: 0 10px 10px;
max-width: 250px;
text-align: center;
}
.text h5 {
padding: 0 10px 10px;
font-size: 4em;
}
.AboutUs {
display: grid;
justify-items: center;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 0px 10px;
grid-template-areas:
"AboutUs1 AboutUs2";
grid-area: AboutUs;
}
.AboutUs2 .AboutTitle {
font-family: "Oswald",sans-serif; font-weight: 400; font-size: 1.3em; text-align: center; margin:0px;
text-align: center;
}
@media only screen and (max-width: 480px) {
.AboutUs{
grid-template-columns: 1fr;
//grid-template-rows: 1fr;
grid-template-areas:
"AboutUs1"
"AboutUs2";
}}
@media only screen and (max-width: 480px) {
.AboutUs1 {
padding-bottom: 15px;
}}
@media only screen and (max-width: 480px) {
.AboutUs2 .AboutTitle{
font-family: "Oswald",sans-serif; font-weight: 400; font-size: 1.5em; text-align: center; margin:0px;
text-align: center;
}}
@media only screen and (max-width: 480px) {
.AboutUs2 p{
text-align: center !important;
padding-left: 15px;
padding-right: 15px;
}}
.AboutUs1 { grid-area: AboutUs1;}
.AboutUs2 { grid-area: AboutUs2;}
/* For presentation only,no need to copy the code below */
//.grid-container * {
border: 1px solid red;
position: relative;
}
//.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="CENTER">
<div class="grid-container">
<div class="OneBox"><img src="https://560144-sb1.app.netsuite.com/core/media/media.nl?id=69869&c=560144_SB1&h=PeHCDHaMA0leq5MIxqPPQU9Av_PItyZtM_LgBwctdogeaH8H&fcts=20210205110516&whence="></div>
<div class="BoxText">
<div class="BoxText1"><img src="https://560144-sb1.app.netsuite.com/core/media/media.nl?id=69869&c=560144_SB1&h=PeHCDHaMA0leq5MIxqPPQU9Av_PItyZtM_LgBwctdogeaH8H&fcts=20210205110516&whence="></div>
<div class="BoxText2"><img src="https://560144-sb1.app.netsuite.com/core/media/media.nl?id=69869&c=560144_SB1&h=PeHCDHaMA0leq5MIxqPPQU9Av_PItyZtM_LgBwctdogeaH8H&fcts=20210205110516&whence="></div>
<div class="BoxText3"><img src="https://560144-sb1.app.netsuite.com/core/media/media.nl?id=69869&c=560144_SB1&h=PeHCDHaMA0leq5MIxqPPQU9Av_PItyZtM_LgBwctdogeaH8H&fcts=20210205110516&whence="></div>
</div>
<div class="cards">
<div class="card1">
<img src="https://560144-sb1.app.netsuite.com/core/media/media.nl?id=69866&c=560144_SB1&h=5lRy29tlbsqyjh9jlO1a4h_afCnuDp7tTs9Ej7dHKp78ekuI&fcts=20210205101510&whence=" alt="Sample photo">
<div class="text">
<div class="text-title"><h4>SNow Globes</h4>
</div>
<div class="text-description"><p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
</div></div>
</div>
<div class="card2">
<img src="https://560144-sb1.app.netsuite.com/core/media/media.nl?id=69866&c=560144_SB1&h=5lRy29tlbsqyjh9jlO1a4h_afCnuDp7tTs9Ej7dHKp78ekuI&fcts=20210205101510&whence=" alt="Sample photo">
<div class="text">
<div class="text-title"><h4>SNow GLOBES</h4>
</div>
<div class="text-description"><p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
</div></div>
</div>
<div class="card3">
<img src="https://560144-sb1.app.netsuite.com/core/media/media.nl?id=69866&c=560144_SB1&h=5lRy29tlbsqyjh9jlO1a4h_afCnuDp7tTs9Ej7dHKp78ekuI&fcts=20210205101510&whence=" alt="Sample photo">
<div class="text">
<div class="text-title"><h4>SNow Globes</h4>
</div>
<div class="text-description"><p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
</div></div>
</div>
<div class="card4">
<img src="https://560144-sb1.app.netsuite.com/core/media/media.nl?id=69866&c=560144_SB1&h=5lRy29tlbsqyjh9jlO1a4h_afCnuDp7tTs9Ej7dHKp78ekuI&fcts=20210205101510&whence=" alt="Sample photo">
<div class="text">
<div class="text-title"><h4>SNow Globes</h4>
</div>
<div class="text-description"><p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
</div></div>
</div>
</div>
<div class="AboutUs">
<div class="AboutUs1"><img src="https://560144-sb1.app.netsuite.com/core/media/media.nl?id=69870&c=560144_SB1&h=DqCszLaqvCErxYdmI0Vtc2T0J2xC7U8ElM4qZAK_3maCbDoV&fcts=20210205172051&whence=" alt="About Us"></div>
<div class="AboutUs2"><div class="AboutTitle">About Us</div>
<p>There will be a paragraph here about Neil Enterprises There will be a paragraph here about Neil Enterprises. There will be a paragraph here about Neil Enterprises. There will be a paragraph here about Neil Enterprises. There will be a paragraph here about Neil Enterprises. There will be a paragraph here about Neil EnterprisesThere will be a paragraph here about Neil Enterprises. There will be a paragraph here about Neil Enterprises. There will be a</p>
</div>
</div>
</div>
</div>
</body>
</html>
`
解决方法
您可以改用 justify-items: center;。
请看这里的完整解释：https://www.digitalocean.com/community/tutorials/css-align-justify
更新
我刚刚意识到您将 CENTER 作为主 DIV 的类，并且会影响内部的所有内容（不属于 DIV 或 {{1} }} 在其类中没有任何对齐），但由于所有项目都有不同的 DIV，内容或项目不会居中。为了实现它，您可以像这样将 display 类应用到需要居中的类：
CENTER版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。