证明内容和对齐内容在 CSS 网格中不起作用
justify-content and align-content not working in CSS Grid
我有一个 3 行 1 列的网格,中间行的项目本身是一个 2 列 4 行的网格。
CSS 片段
.css-grid-container-common-styles{
height:100vh; /*???*/
display: grid;
grid-template-columns: 1fr; /* 1column*/
grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}
HTML 片段
<div class="css-grid-container-common-styles"> <!-- first container -->
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles"> <!-- goes in 1st for -->
</nav>
<div class="css-grid-item-info-div-common-styles"> <!-- this container item is also a container -->
<div class="css-grid-container-practice-create-div-common-styles"> <!-- this is a container --> </div>
</div>
<div class="css-grid-item-footer-common-styles"> foooter goes here
</div>
问题 1 - 我的问题是 align-text
和 justify-text
不适用于嵌入式容器。我想 center
嵌入容器的项目,但它们仍然出现在起始位置。我已使用以下规则将项目居中(a para),但它不起作用。
.css-grid-item-practice-para1-div-common-styles{
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
但是,如果我添加 display:flex
,它会起作用!为什么?
.css-grid-item-practice-para1-div-common-styles{
display:flex; /*work if this is added*/
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
问题2:我添加的按钮(P1,C1)即使display:flex
也没有移动到中心
完整代码如下
CSS
.body-common-styles {
background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color:white;
font-family: Helvetica;
line-height: 1;
}
.div-common-styles{
background-color:#0F2148;
}
.button-common-styles-normal{
/*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); */
background-color: #4da3f8;
border:none;
color:white;
border-radius: 8px;
width:100px; /* sets the width of the content area to 200 px */
height: 40px;
box-sizing: border-box;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.button-common-styles-normal:hover {
background-color: #268ff4;
}
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
.centre-vertical-common-styles {
position: fixed; /*Fixed positioning acts similarly to absolute positioning with a couple of differences.*/
left: 50%; /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%; /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.centre-button-vertical-common-styles {
position: absolute; /*An absolutely positioned element is positioned relative to the first parent element that has a position other than static applied to it. */
left: 50%; /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%; /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.debug-border-common-styles {
border: 3px solid black;
height:200px;
width:400px;
}
.css-grid-container-common-styles{
height:100vh; /*???*/
display: grid;
grid-template-columns: 1fr; /* 1column*/
grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}
.css-grid-item-nav-div-common-styles{
grid-column: 1 / -1;
grid-row: 1 / 2;
}
.css-grid-item-info-div-common-styles{
grid-column: 1 / -1;
grid-row: 2 / 3;
align-self: center;
justify-self:center;
}
.css-grid-item-footer-common-styles{
grid-column: 1 / -1;
grid-row: 3 / -1;
background-color: white;
color:black;
}
/* info div is a container. It is continer item in css-grid-container-common-styles and it has two items css-grid-container-info-div-common-styles and css-grid-item-practice-div-common-styles*/
.css-grid-container-practice-create-div-common-styles{
display:grid;
grid-template-columns: 1fr 1fr;
/*grid-template-rows: auto auto auto auto;*/
height:300px; /* could it be made % ?*/
width:450px;
border: 1px solid white;
border-radius: 8px;
background-color:white;
color:black;
box-shadow: 3px 3px 3px grey;
}
.css-grid-item-practice-para1-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.css-grid-item-practice-para2-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.css-grid-item-practice-para3-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.css-grid-item-practice-button-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.css-grid-item-create-para1-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.css-grid-item-create-para2-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.css-grid-item-create-para3-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.css-grid-item-create-button-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 2 / 3;
grid-row: 4 / 5;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Coding Jedi</title>
<link rel="stylesheet" media="screen" href="../common/css/css-reset.css">
<link rel="stylesheet" media="screen" href="../common/css/common-styles.css">
<link rel="stylesheet" media="screen" href="../common/css/bootstrap.css">
</head>
<body class="body-common-styles">
<div class="css-grid-container-common-styles">
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">CodingJedi</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html">About</a>
</li>
</ul>
</div>
</nav>
<div class="css-grid-item-info-div-common-styles"> <!-- this container item is also a container -->
<div class="css-grid-container-practice-create-div-common-styles"> <!-- this is a container -->
<p class="css-grid-item-practice-para1-div-common-styles"> P1. </p>
<p class="css-grid-item-practice-para2-div-common-styles"> P2. </p>
<p class="css-grid-item-practice-para3-div-common-styles"> P3. </p>
<button type="button" class="button-common-styles-normal css-grid-item-practice-button-div-common-styles"> P! </button>
<p class="css-grid-item-create-para1-div-common-styles"> P4</p>
<p class="css-grid-item-create-para2-div-common-styles"> P5</p>
<p class="css-grid-item-create-para3-div-common-styles"> P6 </p>
<button type="button" class="button-common-styles-normal css-grid-item-create-button-div-common-styles"> C!</button>
</div>
</div>
<div class="css-grid-item-footer-common-styles">
footer goes here
</div>
</div>
<script src="../common/javascripts/jquery-3.2.1.js" type="text/javascript"></script>
<script src="../common/javascripts/bootstrap.js"></script>
</body>
</html>
Question 2: The buttons I have added (P1,C1) do not move to center even with display:flex
请注意,当您应用居中规则时...
display: flex;
align-items: center;
justify-content: center;
在 p
元素上,规则适用于 p
的 content(即文本)。这才是真正居中的东西。
同样,当您将居中规则应用于 button
元素时,它也会使 button
的内容(即文本)居中。
您期望它使按钮本身居中。如果规则不使 p
居中,它也不会使 button
兄弟姐妹居中。
如果你想让按钮元素居中,试试这个:
button {
align-self: center;
justify-self: center;
}
https://jsfiddle.net/jz15cLhd/
另外一个问题,我没有看到。我得到与 display: flex
和 display: grid
.
居中相同的结果
这篇post可能对你有用:
我有一个 3 行 1 列的网格,中间行的项目本身是一个 2 列 4 行的网格。
CSS 片段
.css-grid-container-common-styles{
height:100vh; /*???*/
display: grid;
grid-template-columns: 1fr; /* 1column*/
grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}
HTML 片段
<div class="css-grid-container-common-styles"> <!-- first container -->
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles"> <!-- goes in 1st for -->
</nav>
<div class="css-grid-item-info-div-common-styles"> <!-- this container item is also a container -->
<div class="css-grid-container-practice-create-div-common-styles"> <!-- this is a container --> </div>
</div>
<div class="css-grid-item-footer-common-styles"> foooter goes here
</div>
问题 1 - 我的问题是 align-text
和 justify-text
不适用于嵌入式容器。我想 center
嵌入容器的项目,但它们仍然出现在起始位置。我已使用以下规则将项目居中(a para),但它不起作用。
.css-grid-item-practice-para1-div-common-styles{
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
但是,如果我添加 display:flex
,它会起作用!为什么?
.css-grid-item-practice-para1-div-common-styles{
display:flex; /*work if this is added*/
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
问题2:我添加的按钮(P1,C1)即使display:flex
完整代码如下
CSS
.body-common-styles {
background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color:white;
font-family: Helvetica;
line-height: 1;
}
.div-common-styles{
background-color:#0F2148;
}
.button-common-styles-normal{
/*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); */
background-color: #4da3f8;
border:none;
color:white;
border-radius: 8px;
width:100px; /* sets the width of the content area to 200 px */
height: 40px;
box-sizing: border-box;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.button-common-styles-normal:hover {
background-color: #268ff4;
}
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
.centre-vertical-common-styles {
position: fixed; /*Fixed positioning acts similarly to absolute positioning with a couple of differences.*/
left: 50%; /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%; /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.centre-button-vertical-common-styles {
position: absolute; /*An absolutely positioned element is positioned relative to the first parent element that has a position other than static applied to it. */
left: 50%; /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
top: 50%; /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
transform: translate(-50%, -50%);
}
.debug-border-common-styles {
border: 3px solid black;
height:200px;
width:400px;
}
.css-grid-container-common-styles{
height:100vh; /*???*/
display: grid;
grid-template-columns: 1fr; /* 1column*/
grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}
.css-grid-item-nav-div-common-styles{
grid-column: 1 / -1;
grid-row: 1 / 2;
}
.css-grid-item-info-div-common-styles{
grid-column: 1 / -1;
grid-row: 2 / 3;
align-self: center;
justify-self:center;
}
.css-grid-item-footer-common-styles{
grid-column: 1 / -1;
grid-row: 3 / -1;
background-color: white;
color:black;
}
/* info div is a container. It is continer item in css-grid-container-common-styles and it has two items css-grid-container-info-div-common-styles and css-grid-item-practice-div-common-styles*/
.css-grid-container-practice-create-div-common-styles{
display:grid;
grid-template-columns: 1fr 1fr;
/*grid-template-rows: auto auto auto auto;*/
height:300px; /* could it be made % ?*/
width:450px;
border: 1px solid white;
border-radius: 8px;
background-color:white;
color:black;
box-shadow: 3px 3px 3px grey;
}
.css-grid-item-practice-para1-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.css-grid-item-practice-para2-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.css-grid-item-practice-para3-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.css-grid-item-practice-button-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.css-grid-item-create-para1-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.css-grid-item-create-para2-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.css-grid-item-create-para3-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 2 / 3;
grid-row: 3 / 4;
}
.css-grid-item-create-button-div-common-styles{
display:flex;
align-items: center;
justify-content: center;
grid-column: 2 / 3;
grid-row: 4 / 5;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Coding Jedi</title>
<link rel="stylesheet" media="screen" href="../common/css/css-reset.css">
<link rel="stylesheet" media="screen" href="../common/css/common-styles.css">
<link rel="stylesheet" media="screen" href="../common/css/bootstrap.css">
</head>
<body class="body-common-styles">
<div class="css-grid-container-common-styles">
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">CodingJedi</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html">About</a>
</li>
</ul>
</div>
</nav>
<div class="css-grid-item-info-div-common-styles"> <!-- this container item is also a container -->
<div class="css-grid-container-practice-create-div-common-styles"> <!-- this is a container -->
<p class="css-grid-item-practice-para1-div-common-styles"> P1. </p>
<p class="css-grid-item-practice-para2-div-common-styles"> P2. </p>
<p class="css-grid-item-practice-para3-div-common-styles"> P3. </p>
<button type="button" class="button-common-styles-normal css-grid-item-practice-button-div-common-styles"> P! </button>
<p class="css-grid-item-create-para1-div-common-styles"> P4</p>
<p class="css-grid-item-create-para2-div-common-styles"> P5</p>
<p class="css-grid-item-create-para3-div-common-styles"> P6 </p>
<button type="button" class="button-common-styles-normal css-grid-item-create-button-div-common-styles"> C!</button>
</div>
</div>
<div class="css-grid-item-footer-common-styles">
footer goes here
</div>
</div>
<script src="../common/javascripts/jquery-3.2.1.js" type="text/javascript"></script>
<script src="../common/javascripts/bootstrap.js"></script>
</body>
</html>
Question 2: The buttons I have added (P1,C1) do not move to center even with
display:flex
请注意,当您应用居中规则时...
display: flex;
align-items: center;
justify-content: center;
在 p
元素上,规则适用于 p
的 content(即文本)。这才是真正居中的东西。
同样,当您将居中规则应用于 button
元素时,它也会使 button
的内容(即文本)居中。
您期望它使按钮本身居中。如果规则不使 p
居中,它也不会使 button
兄弟姐妹居中。
如果你想让按钮元素居中,试试这个:
button {
align-self: center;
justify-self: center;
}
https://jsfiddle.net/jz15cLhd/
另外一个问题,我没有看到。我得到与 display: flex
和 display: grid
.
这篇post可能对你有用: