Html 当高度增加时，如何使文本垂直居中？_Html_Css

Html 当高度增加时，如何使文本垂直居中？

html css

Html 当高度增加时，如何使文本垂直居中？,html,css,Html,Css,我的html文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using Web Font</title> <link rel="stylesheet" type="text/css" href="style.css"> </head&g

我的html文件：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Using Web Font</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p class="paragraph">Making the Web Beautiful!</p>
</body>

</html>

结果:

随着.paragration高度的增加，文本的位置不会再次改变为垂直居中。有没有办法使文本在高度变化时垂直居中？我是新的编码，所以我真的不确定

如果我能得到一些帮助就太好了！谢谢

使用flexbox使您的工作更轻松。只需添加显示：flex；对齐项目：居中

html，身体{ 字体大小：40px；文本对齐：居中；垫面：3.5em； } @字体{ 字体系列：“舞蹈脚本”；字体风格：普通；字号：500；字体显示：交换； src:urlhttps://fonts.gstatic.com/s/dancingscript/v15/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BAyo3Sup8.woff2 格式'woff2'； } .段{ 字体系列：“舞蹈脚本”；字体风格：普通；字号：500；字体显示：交换；边界宽度：厚；边框样式：虚线实线；边框颜色：红色rgba170、50、220、.6绿色；宽度：9em；保证金：0自动；高度：10公分；显示器：flex；对齐项目：居中； } 使用网页字体

让网络变得美丽

由于这是一个p标记，您可以在CSS中添加使用padding top 50%来垂直对齐它

在CSS中包括以下内容

.paragraph {padding-top: 50%}

您可以在这里使用网格

html，身体{ 字体大小：40px；文本对齐：居中；垫面：3.5em； } @字体{ 字体系列：“舞蹈脚本”；字体风格：普通；字号：500；字体显示：交换； src:urlhttps://fonts.gstatic.com/s/dancingscript/v15/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BAyo3Sup8.woff2 格式'woff2'； } .段{ 字体系列：“舞蹈脚本”；字体风格：普通；字号：500；字体显示：交换；边界宽度：厚；边框样式：虚线实线；边框颜色：红色rgba170、50、220、.6绿色；显示：内联块；宽度：9em；保证金：0自动；高度：10公分；显示：网格；对齐项目：居中； } 使用网页字体

让网络变得美丽

嗯，这似乎使文本更靠近中心，但实际上没有居中。我认为与我的填充值有关的部分没有正确地相加以使填充顶部：50%被正确地应用。谢谢，它成功了！只有一个问题，你知道你是如何摆脱显示的：内联块；刚刚写了display:flex；顺其自然。内联块值是否被显示覆盖：flex；因为这是代码中定义的最后一个显示值？请让我知道，谢谢你的回答！很抱歉。我删除了不需要的代码。是的，在CSS中，如果在第一个属性之后指定了相同的属性，它将被最新的属性覆盖。谢谢您的回答！这似乎与display:flex；的工作原理相同；。我觉得我已经看到人们更多地使用flexbox解决这类问题，虽然我是一个新手，但不是100%确定，这更有意义，因为我不想制作网格？但是它仍然有效，谢谢你的回答！

.paragraph {padding-top: 50%}