居中网格模板区域

Question

我正在创建一个简单的网站。我有这个：

我有两行网格区域。

第一：

grid-template-areas:
          'iz td'

第二行：

  /*second*/

          grid-template-areas:
          'td2 iz'

我想除掉正确的边距，始终居中。

Desired result

这是我的CSS文件half.css

html {
  /*box-sizing: border-box;*/
    font-family: Arial, Helvetica, sans-serif;
    background: rgb(243, 243, 243);

}

body {

  margin: 0px 0px;
    line-height: 1.4;
    padding-left: 0px;
    padding-right: 0px;
    /*background-image: url(top.png) ;*/

    background-repeat: no-repeat;
    background-position: top center , center right;
    background-size: contain;


}






  /*first text down*/
      .update {
          display:grid;
          grid-gap:0px;

          justify-items: normal;
          grid-template-columns: 45% 45%;
          grid-template-areas:
          'iz td'

         ;
      }

      .iz {
          grid-area: iz;
          background: url(https://picsum.photos/500/300);
          min-height: 400px;
          background-size: cover;
          background-position: center;

      }

      .td {
          display: grid;
          grid-area: td;
          justify-content:right;
          padding: 60px;


      }
      .td h1 {color: var(--title);}



      /*second*/
      .limit {
          display:grid;
          grid-gap:00px;
          justify-items: normal;
          grid-template-columns: 45% 45%;
          grid-template-areas:
          'td2 iz'


         ;
      }



      .td2 {
          display: grid;
          grid-area: td2;
          justify-content:right;
          padding: 60px;

      }
      .td2 h1 {color: var(--title);}

HTML文件

<!DOCTYPE html>
<html>
  <head>
<title>Francisco Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="half.css">
<script src="https://kit.fontawesome.com/845d55b72b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>



<section class="update">


    <header class="td">
    <h1>Update everything</h1>
    <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</p>

  </header>

  <div class="iz">

  </div>

</section>

<section class="limit">
    <header class="td2">
        <h1>Limitless feature</h1>
        <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</p>

      </header>
      <div class="iz">

    </div>
</section>




</body>
</html>

Answer 1

我将网格以所需的总宽度（在上面为90％）包装在DIV层内，并使用margin: auto;使容器居中。

在<section>标签周围添加DIV：

<div class="centered">

更改CSS：

.limit {
     display:grid;
     grid-gap:00px;
     justify-items: normal;
     grid-template-columns: 50% 50%;
     grid-template-areas:
       'td2 iz'
     ;
  }

  .update {
      display:grid;
      grid-gap:0px;
      justify-items: normal;
      grid-template-columns: 50% 50%;
      grid-template-areas:
      'iz td'
     ;
  }

 .centered {
    width: 90%;
    margin: auto;
  }

结果

居中网格模板区域

问题描述投票：0回答：1

1个回答

最新问题

居中网格模板区域

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1