html - css grid justify-self 不居中文本
问题描述
我正在接近 CSS 网格，我对属性 justify-self 的行为感到惊讶。我想要实现的是将一些文本放在 div 中。
这是我的代码：
.page-5 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 4fr 5fr;
height: 100vh;
}
.page-5-black {
grid-row: 1 / 2;
grid-column: 1 / 2;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
background-color: black;
}
.page-5-phrase {
grid-column: 2 / 3;
grid-row: 2 / 3;
color:white;
font-weight: bold;
font-size: 60px;
justify-self: center;
}
.page-5-button {
grid-column: 2 / 3;
grid-row: 3 / 4;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 2fr 3fr 2fr;
}
.page-5-button-sub1 {
grid-column: 2 / 3;
grid-row: 2 / 3;
display: grid;
grid-template-columns: 2fr 5fr 2fr;
grid-template-rows: 1fr 3fr 1fr;
color: white;
text-transform:uppercase;
background-color:rgb(117, 232, 255);
border-bottom-left-radius:28px;
border-bottom-right-radius:28px;
border-top-left-radius:28px;
border-top-right-radius:28px;
cursor:pointer;
}
.page-5-button-sub2 {
grid-column: 2 / 3;
grid-row: 2 / 3;
align-self: center;
justify-self:center;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="css/page5.css">
</head>
<body>
<div class="page-5">
<div class="page-5-black">
<span class="page-5-phrase">Join my company and nobody gets hurt</span>
<div class="page-5-button">
<div class="page-5-button-sub1">
<span class="page-5-button-sub2">Okay, i am in</span>
</div>
</div>
</div>
</div>
</body>
</html>如您所见，文本“加入我的公司，没有人受到伤害”不受 justify-self 属性的影响。另一方面，如果将此类文本简化为“加入”，您会看到文本将正确对齐。显然，这与单元格的可用空间和包含的文本有关。
所以，我的目标是在单元格中对齐“加入我的公司，没有人受伤”，就像对齐文本“加入”一样。
我怎样才能实现我的目标？