在子类中，随着文本的增长垂直居中

Centering text vertically as it grows, in child class

本文关键字：垂直居中 文本 子类      更新时间：2023-09-26

我有一个父容器(如弹出窗口)，其中我有一个附加到父容器的子元素。子元素是一个div，其中包含一些文本。我想在div内的文本居中，使文本在子div中保持居中对齐，但文本应该垂直对齐，因为它超过3-4行。我能够垂直对齐文本，因为它的增长，但当它仍然是一个小文本，它应该是中心垂直，这是没有发生。我在子类中尝试了很多css属性。任何帮助都是好的

.parentclass {
  position: absolute;
  top: 110px;
 left: 165px;
 width: 470px;
 height: 260px;
 text-align: center;
 background-image: url(../images/Notification_BG.png); }
.childclass {
 position: relative;
 position: inherit;
 width: 430px;
 height: 192px;
 left: 50%;
 top: 50%;
 margin-left: -215px;
 margin-top: -96px; /* Negative half of height. */
 text-align: center;
 text-overflow: -o-ellipsis-lastline;
 border: 1px solid blue;
 font-family: Arial;
 font-size: 28px;
 color: white; }

谢谢KK

您使用过vertical-align:middle;吗?

try this:

<>之前.childclass {显示:表格单元;vertical-align:中间;text-align:中心;}之前

这个链接一定会对你有帮助:

垂直-中心-文字- - - - - 100年-高度div

使用你的父类显示为表格，子类显示为表格单元格，vertical-align:middle肯定会起作用

html 

<div class='parentclass'>
<div class='childclass'>Text which is more than two or three lines</div>
</div>
Css 

.parentclass {
 height: 260px;
 text-align: center;
 display:table;
}
.childclass {
 vertical-align: middle;
 width: 430px;
 top: 50%;
 text-align: center;
 text-overflow: -o-ellipsis-lastline;
 border: 1px solid blue;
 font-family: Arial;
 font-size: 28px;
 color: black; 
}

相关文章：