对齐 CSS 元素网格中的文本 [重复]

Posted 2023-03-05

【中文标题】对齐 CSS 元素网格中的文本 [重复]

【英文标题】：Align text in CSS element grid [duplicate]

【发布时间】：2019-07-21 02:12:04

【问题描述】：

I have made this CSS grid。我还在练习使用 CSS 网格，所以我试图模仿 this site。我想将文本放置在与我链接到的模板相同的位置。

但是正确的方法是如何做到这一点的呢？目前链接在左上角。

我应该在第一个 div 标签中创建另一个 div，或者最好的方法是什么？

最好的问候。

.wrapper 
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-gap: 10px;
   

  .wrapper > div 
    background-color: #eee;
    padding: 1em;
    box-sizing: border-box;
  

  .wrapper > div:nth-child(odd) 
    background-color: #ddd;
  

  .item1 
    grid-row: 1 / 3;
    grid-column: 1/7;
    height: 700px;
  
  .item2 
    grid-row: 1 / 1;
    grid-column: 7/13;
    height: 340px;
  
  .item3 
    grid-row: 2 / 3;
    grid-column: 7/10;
    height: 350px;
   
  .item4 
    grid-row:2/3;
    grid-column: 10/13;
    height: 350px;
  
  a 
    font-size: 30px;
  

  @media only screen and (max-width: 600px) 
    .wrapper 
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-gap: 10px;
     
    .item1 
      grid-row: 1 / 3;
      grid-column: 1/13;
      height: 350px;
    
    .item2 
      grid-row: 3 / 3;
      grid-column: 1/13;
      height: 200px;
    
    .item3 
      grid-row: 4 / 5;
      grid-column: 1 / 7;
      height: 200px;
     
    .item4 
      grid-row: 4 / 5;
      grid-column: 7 / 13;
      height: 200px;
    
  
    
    /*
    .nested 
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-gap:1em;
    
    .nested > div 
      border:1px solid red;
      grid-auto-rows: 70px;
      padding:1em;
    
    */

<div class="wrapper">
    <div class="item1">
      <a href="#">Watch a tiny cat taking a bath</a>
    </div>
    <div class="item2">
      <a href="#">Spain: Take a virtual tour</a>
    </div>
    
    <div class="item3">
      <a href="#">5 Tips to create your garden</a>
    </div>
    
    <div class="item4">
      <a href="#">10 Movies you need to see</a>
    </div>
  
  </div>

【问题讨论】：

致那些将其标记为重复问题并提出“这个问题在这里已经有了答案：”的人。发布的所有链接都与文本的 flexbox 和 CSS 网格位置无关。

仅仅是因为它不是关于 flexbox 或 CSS 网格，而是关于对齐 div 内的文本。如果您阅读副本，您会注意到与您接受的答案相同的 flexbox 解决方案：***.com/a/40777362/8620333 / ***.com/a/35046535/8620333 确认重复

文本不在网格内..您的包装器是网格元素，项目是网格项目，这是您的网格范围..项目内的内容不属于网格。然后你能解释一下 flexbox 是如何为你工作的吗？仅仅因为您将网格项目设置为一个 flex 容器以对齐内部文本，或者您可以使用副本中描述的任何技术以不同方式执行此操作。使用 display:grid 不会使您的所有 html 成为网格，只会使您应用它的元素。所以你的问题是“在 div 中对齐文本”

【参考方案1】：

将此添加到项目中

display: flex;
justify-content: flex-end;
flex-direction: column;

.wrapper 
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-gap: 10px;
   

  .wrapper > div 
    background-color: #eee;
    padding: 1em;
    box-sizing: border-box;
  

  .wrapper > div:nth-child(odd) 
    background-color: #ddd;
  

  .item1 
    grid-row: 1 / 3;
    grid-column: 1/7;
    height: 700px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  
  .item2 
    grid-row: 1 / 1;
    grid-column: 7/13;
    height: 340px;
  
  .item3 
    grid-row: 2 / 3;
    grid-column: 7/10;
    height: 350px;
   
  .item4 
    grid-row:2/3;
    grid-column: 10/13;
    height: 350px;
  
  a 
    font-size: 30px;
  

  @media only screen and (max-width: 600px) 
    .wrapper 
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-gap: 10px;
     
    .item1 
      grid-row: 1 / 3;
      grid-column: 1/13;
      height: 350px;
    
    .item2 
      grid-row: 3 / 3;
      grid-column: 1/13;
      height: 200px;
    
    .item3 
      grid-row: 4 / 5;
      grid-column: 1 / 7;
      height: 200px;
     
    .item4 
      grid-row: 4 / 5;
      grid-column: 7 / 13;
      height: 200px;
    
  
    
    /*
    .nested 
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-gap:1em;
    
    .nested > div 
      border:1px solid red;
      grid-auto-rows: 70px;
      padding:1em;
    
    */

<div class="wrapper">
    <div class="item1">
      <a href="#">Watch a tiny cat taking a bath</a>
    </div>
    <div class="item2">
      <a href="#">Spain: Take a virtual tour</a>
    </div>
    
    <div class="item3">
      <a href="#">5 Tips to create your garden</a>
    </div>
    
    <div class="item4">
      <a href="#">10 Movies you need to see</a>
    </div>
  
  </div>

【讨论】：

非常感谢您的回答。我可以看到这是有效的。但是是什么控制了文本的位置？如果我比现在更想要文本，是我必须使用填充，还是有一个聪明的方法来做到这一点？

你可以加margin :)

它由flex 控制 - 请阅读here。您告诉项目内的内容为列（垂直），然后将其对齐到末尾flex-end。希望这是有道理的

你确定混合css网格和flexbox是正确的吗？

我对 CSS Grid 不太熟悉，我相信你可以找到一种方法来代替它，但是 flexbox 可以工作，我看不出有什么理由不使用它