在div的中心制作文本[重复]答案

【问题标题】：Make text in the center of a div [duplicate]在div的中心制作文本[重复]
【发布时间】：2018-07-03 02:41:38
【问题描述】：

那不是我想要的 div 我只是无法发布它，因为它不符合某些要求。我以前从来没有用过这样的东西，只是需要一个需要编程的大学项目的帮助。我有这个：enter image description here

我只想让文本居中。 jsfiddle .net /etr1ok47/#&togetherjs=VfasppUOxh

【问题讨论】：

通常可以调整line-height或padding-top使其垂直居中。

【解决方案1】：

在this-p 类中使用 flex：

display: flex;
flex-direction: column;
justify-content: center;

【讨论】：

你好，它起作用了，但是每个圆圈都进入一个段落.. 我尝试删除
但它们彼此重叠ibb.co/iZTjBd

【解决方案2】：

尝试将以下内容应用于您的包含 div (.parent) 和文本周围的包装 (.child)。

.parent {
  height: 300px;
  line-height: 300px;
  text-align: center;
}
.child {
  line-height: normal;
  display: inline-block;
  vertical-align: middle;
}

【讨论】：

child 将是 -span？
是的 .child 将是您要垂直居中的文本周围的跨度

【解决方案3】：

如果您需要圆圈中的单词更好地垂直居中，您可以在 css 中的 p 元素顶部添加填充。

p.this-p{
    vertical-align: middle;
}

如果问题是 p 本身不在 li 元素中居中，则使用 display: table 定义父元素，使用 vertical-align: middle 和 display: table-cell 定义元素本身

【讨论】：

填充似乎没有生效
显示设置是什么？ p 元素应该接受填充。圆形边框是应用于p元素还是容器？
看我回答的最后一部分。您可以应用垂直对齐。

【解决方案4】：

p.this-p{ 垂直对齐：中间；对齐：居中}

上面是当你使用 p 元素和填充时。同样适用于其他元素

【讨论】：