0

我有一个父容器（如弹出窗口），其中我有一个子元素附加到父容器。子元素是一个包含一些文本的 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

4

2 回答 2

0

使用您的父类显示作为表格，子类显示作为表格单元和垂直对齐：中间肯定会工作

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; 
}

看到这个小提琴演示

于 2012-12-28T06:21:46.970 回答
0

你用过vertical-align:middle;吗？

尝试这个 ：

.childclass {
  显示：表格单元格；
  垂直对齐：中间；
  文本对齐：居中；
}

这个链接肯定会帮助你：

100 高度 div 中的垂直居中文本

于 2012-12-28T05:43:20.203 回答