问将所有项目居中对齐
EN

Stack Overflow用户

提问于 2021-02-28 08:47:23

回答 1查看 43关注 0票数 1

我在对齐图像以对齐中心时遇到了问题。我做错了什么？我不确定我是不是把这个网格搞乱了？我已经尝试过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&nbsp; 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>
`

css

alignment

css-grid

回答 1

Stack Overflow用户

发布于 2021-02-28 08:57:12

您可以改用justify-items: center;。

请在这里查看完整的解释：https://www.digitalocean.com/community/tutorials/css-align-justify

更新

我刚刚意识到您将CENTER作为主DIV的类，并将影响其中的所有内容(这不是DIV的一部分，也不是类中没有任何对齐的DIV的一部分)，但是由于所有项都有不同的display，所以内容或项不会居中。为了实现这一点，您可以将CENTER类应用到需要居中的位置，如下所示：

<DIV style="stylename CENTER anotherStylename">
    ...
</DIV>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66404889

复制

相似问题

问将所有项目居中对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将所有项目居中对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将所有项目居中对齐
EN