如何在css网格中水平居中显示文本

Question

我试图将一些文本居中放置在网格容器中，但我所管理的最接近的是我在片段上创建的内容，但我的文本看起来几乎就像是嵌套的，我希望所有文本都居中，就像报纸/杂志的列一样？

我不知道我对此的解释是否正确。

提前谢谢。

.container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 12px;
justify-content: center;
justify-items: center;
align-items: center;
border: 1px solid black;
}
.item {
padding: 0 12px;
text-align: center;
}

<div class="container">
<p class="item">Content 1 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum Content 1 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum Content 1 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum</p>
<p class="item"> Content 2 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum Content 2 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum</p>
<p class="item"> Content 3 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum</p>
</div>

Answer 1

如果希望多个文本行具有相等的长度，则可以使用text-align: justify;或text-align: justify-all;。

正如mdn所说的text-align: justify;:

对齐：内联内容对齐。文本的间距应为将其左边缘和右边缘与行框，最后一行除外。

和text-align: justify-all;:

与justify相同，但也强制最后一行正当的

一个例子：

.container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 12px;
justify-content: center;
justify-items: center;
align-items: center;
border: 1px solid black;
}
.item {
padding: 0 12px;
text-align: justify;
}

<div class="container">
<p class="item">Content 1 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum Content 1 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum Content 1 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum</p>
<p class="item"> Content 2 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum Content 2 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum</p>
<p class="item"> Content 3 lorem ipsulum lorem ipsulum lorem ipsulum lorem ipsulum</p>
</div>

Answer 2

最好的方法是使用flexbox:

.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;

width: 300px;
height: 300px;
border: solid 3px red;
}

<div class="container">
<div class="item">Lorem ipsum</div>
</div>