Html 如何垂直对齐段落中的文本？_Html_Css

Html 如何垂直对齐段落中的文本？

html css

Html 如何垂直对齐段落中的文本？,html,css,Html,Css,我想知道如何将p元素中的文本垂直居中对齐以下是我的风格： p.event\u desc{ 字体：粗体12px“Helvetica Neue”，Helvetica，Arial，无衬线；线高：14px；高度：35px；边际：0px； } Lorem ipsum.您可以使用行高来实现此目的。只需将其设置为p标签的确切高度 p.event_desc { line-height:35px; } 尝试以下风格： p.event\u desc{ 字体：粗体12px“Helvetica Neue

我想知道如何将

元素中的文本垂直居中对齐

以下是我的风格：

p.event\u desc{
字体：粗体12px“Helvetica Neue”，Helvetica，Arial，无衬线；
线高：14px；
高度：35px；
边际：0px；
}

Lorem ipsum.
您可以使用行高来实现此目的。只需将其设置为p
标签的确切高度
p.event_desc {
  line-height:35px;
}

尝试以下风格：
p.event\u desc{
字体：粗体12px“Helvetica Neue”，Helvetica，Arial，无衬线；
线高：14px；
高度：75px；
边际：0px；
显示：表格单元格；
垂直对齐：中间对齐；
填充：10px；
边框：1px实心#f00；
}
您可以使用
    line-height:35px;

你真的不应该在段落上设置一个高度，因为它不利于可访问性（如果用户增加文本大小等会发生什么情况）
而是使用一个具有高度的Div，其中的p具有正确的行高度：
    <div style="height:35px;"><p style="line-height:35px;">text</p></div>

文本
如果使用引导，请尝试将页边距底部0指定给段落，然后将属性align items center指定给容器，例如：
<div class="row align-items-center">
     <p class="col-sm-1 mb-0">
          ....
     </p>
</div>



....


引导默认情况下分配一个计算边距底部，因此mb-0禁用了该选项
我希望这会有所帮助
如果涉及表格或设置行高的答案对您不起作用，您可以尝试将p元素包装在div中，并设置其相对于父div高度的定位样式

.parent div{
宽度：100px；
高度：100px；
背景颜色：蓝色；
}
.text div{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
p、 事件描述{
字体：粗体12px“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：白色；
文本对齐：居中；
}


我的文字

可缩放多行文本的替代解决方案：
将垂直和水平填充设置为（高度-线条高度）/2

p.event_desc {
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 14px;
    padding: 10.5px 0;
    margin: 0px;
}

下面的样式将为您垂直居中
p.event_desc {
 font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
 line-height: 14px;
 height: 35px;
 display: table-cell;
 vertical-align: middle;
 margin: 0px;
}

在我的情况下，保证金自动工程罚款
p {
    font: 22px/24px Ubuntu;
    margin:auto 0px;
}

用户垂直对齐：中间对齐与文本对齐：居中
属性
<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 3px solid green;
  text-align: center;
}

.center p {
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>


.中心{
边框：3倍纯绿；
文本对齐：居中；
}
.中心p{
显示：内联块；
垂直对齐：中间对齐；
}
定心
在本例中，我们使用line height属性的值等于height属性，以使div元素居中：
我是垂直和水平居中的
所以就个人而言，我不确定最好的方法是什么，但我发现一件事对于垂直对齐很有效，那就是使用Flex，因为你可以证明它的内容是正确的
假设您有以下HTML和CSS：

。段落{
字体重量：轻；
颜色：灰色；
最小高度：6rem；
背景：浅蓝色；
}
很高兴认识你！
这是一个段落
@Gatekeeper在这种情况下，我们可以简单地将容器内的段落对齐，使其垂直居中。比如用这种方法：。哇，你实际上在周五下午学到了一些新东西。。。酷：-Deveryone喜欢valign回到表格布局时代！；）可能不简单：不同的是，这一个有固定的高度，没有父元素。在上可以找到一个非常好的参考，用于水平或垂直对齐不同的元素组合。我对HTML CSS是新手。我努力寻找一个不涉及表格的答案（因为它们显然不好…）。这个答案太简单了，不能忽略，所以我就用它了。@Vivekmaharah使用HTML表格标签进行布局是不好的。我不认为在display
中使用table这样做是不好的。如果您希望段落跨越整个宽度，但它只包含几个单词，该怎么办？除了现在我不能这样做，这似乎只适用于具有设置高度的父元素。