居中在CSS网格
我正在尝试使用CSS Grid创build一个简单的页面。
我没有做的是将文本从HTML中心到各自的网格单元格。
我已经尝试将内容放置在left_bg和right_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: center和justify-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>
