居中在CSS网格

我正在尝试使用CSS Grid创build一个简单的页面。

我没有做的是将文本从HTML中心到各自的网格单元格。

我已经尝试将内容放置在left_bgright_bgselect器的内部和外部的独立div中,并且使用某些CSS属性无济于事。

我如何做到这一点?

 html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid; background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; } .right_bg { display: subgrid; background-color: #ecf0f1; grid-column: 2 / 2; grid_row: 1 / 1; z-index: 0; } .left_text { grid-column: 1 / 1; grid-row: 1 / 1; position: relative; z-index: 1; justify-self: center; font-family: Raleway; font-size: large; } .right_text { grid-column: 2 / 2; grid_row: 1 / 1; position: relative; z-index: 1; justify-self: center; font-family: Raleway; font-size: large; } 
 <div class="container"> <!--everything on the page--> <div class="left_bg"> <!--left background color of the page--> </div> </div> <div class="right_bg"> <!--right background color of the page--> </div> <div class="left_text"> <!--left side text content--> <p>Review my stuff</p> <div class="right_text"> <!--right side text content--> <p>Hire me!</p> </div> </div> 

在网格项目中居中内容并不像看起来那么复杂。 其实很简单,有多种方法。 我列出了下面的五个。

这是一个基本的2×2网格:

 grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 75px; grid-gap: 10px; } /* can ignore styles below; decorative only */ grid-container { background-color: lightyellow; border: 1px solid #bbb; padding: 10px; } grid-item { background-color: lightgreen; border: 1px solid #ccc; } 
 <grid-container> <grid-item>this text should be centered</grid-item> <grid-item>this text should be centered</grid-item> <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item> <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item> </grid-container> 

您可以使用flexbox来居中您的文字。 顺便说一句,不需要额外的容器,因为文本被认为是匿名的Flex项目。

从flexbox规格 :

Flex容器的每个stream入子代都成为一个Flex项目 ,并且直接包含在Flex容器中的每个连续运行的文本都包装在一个匿名Flex项目中 。 但是,只包含空格的匿名Flex项目(即可能受到white-space属性影响的字符)不会呈现(就像它是display:none )。

因此,只要将网格项目制作为柔性容器( display: flex ),然后添加align-items: centerjustify-content: center来垂直和水平居中。

还执行了HTML和CSS的优化:

 html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; font-family: Raleway; font-size: large; } .left_bg, .right_bg { display: flex; align-items: center; justify-content: center; } .left_bg { background-color: #3498db; } .right_bg { background-color: #ecf0f1; } 
 <div class="container"> <div class="left_bg">Review my stuff</div> <div class="right_bg">Hire me!</div> </div> 

尝试使用flex:

Plunker演示: https ://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

 /* Styles go here */ html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; display: flex; justify-content: center; align-items: center; } .right_bg { background-color: #ecf0f1; grid-column: 2 / 2; grid_row: 1 / 1; z-index: 0; display: flex; justify-content: center; align-items: center; } .text { font-family: Raleway; font-size: large; text-align: center; } 

HTML

  <div class="container"> <!--everything on the page--> <div class="left_bg"> <!--left background color of the page--> <div class="text"> <!--left side text content--> <p>Review my stuff</p> </div> </div> <div class="right_bg"> <!--right background color of the page--> <div class="text"> <!--right side text content--> <p>Hire me!</p> </div> </div> </div> 

甚至不要尝试使用flex; 留在CSS网格! 🙂

https://jsfiddle.net/ctt3bqr0/

 justify-self: center; align-self: center; 

正在这里做中心工作。

如果你想要在div内的网格单元格内的东西,你需要定义嵌套的网格,以使其工作。 (请看小提琴这两个例子。)

https://css-tricks.com/snippets/css/complete-guide-grid/

干杯!

你要这个?

 html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid; background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; } .right_bg { display: subgrid; background-color: #ecf0f1; grid-column: 2 / 2; grid_row: 1 / 1; z-index: 0; } .text { font-family: Raleway; font-size: large; text-align: center; } 
 <div class="container"> <!--everything on the page--> <div class="left_bg"> <!--left background color of the page--> <div class="text"> <!--left side text content--> <p>Review my stuff</p> </div> </div> <div class="right_bg"> <!--right background color of the page--> <div class="text"> <!--right side text content--> <p>Hire me!</p> </div> </div> </div>