在动态创建的div问题中垂直居中文本

我正在创建一个用于动态添加学生和教师的简单应用程序。在动态创建的div问题中垂直居中文本

我正在点击动态地添加div。

我已将“userListUnit”类添加到该div。

这是JS：

SchoolAdmission.prototype.display = function(nameButton) { 
     var print = document.createElement("div"); 
     print.className = "userListUnit"; 
     print.innerHTML = "Name: " + this.name + ", age:" + this.age + ", depart: " + this.department + "<br><br><br>"; 
     if (nameButton === "addStudent") { 
      document.getElementById('studentList').appendChild(print); 
     } 
     else { 
      document.getElementById('teacherList').appendChild(print); 
     } 
     clearFields(); 
    };

这是CSS：

.userListUnit{ 
    vertical-align: middle; 
    border: 1px solid; 
    text-align: center; 
    line-height: 10px; 
    box-shadow: 5px 5px 5px #888888; 
    margin-bottom: 2em; 
}

我的小提琴：http://jsfiddle.net/LPu9x/7/

尝试加入一个学生或老师，并检查文本在动态创建的div内的位置，然后您将了解其不是垂直居中的。 Any1有任何想法可以解决这个问题吗？

条件：

1）无位置是：绝对的。

2）Div的创建仍然应该低于一个接一个。

更新小提琴解决方案：http://jsfiddle.net/LPu9x/8/

来源

2014-03-03 Nevin Madhukar K

使用直列标签如何使用'显示：表细胞;'[此]（http://stackoverflow.com/questions/ 18649106/DIV-垂直对齐，中间的CSS/18649137＃18649137）？ –

我试过......块出现在右侧，而不是一个接一个下。 –

使用'display：table;'将结果换行为''width：100％' –

试试这个：如果你想调整它，只需修改行高

.userListUnit 
{ 
    vertical-align: middle; 
    border: 1px solid; 
    text-align: center; 
    line-height: 15px; 
    box-shadow: 5px 5px 5px #888; 
    margin-bottom: 2em; 
    padding-top: 5px; 
    height: 30px; 
}

...

看一看here

来源

2014-03-03 08:27:46 csanonymus

我做了什么错误？ –

嗯，你没有设置一个高度..所以行高是“困惑”:)） – csanonymus

上帝诅咒：D谢谢伙计.. –

如果将块元素div更改为内联元素p不是您可以这样做的问题，而vertical-align将按预期工作。当然，也可以删除任何嵌套的br标签，因为CSS应该用于该标签，即：padding/margin。

如果你可以将标签更改为p你的脚本是这样的：

SchoolAdmission.prototype.display = function(nameButton) { 
    var print = document.createElement("p"); // p tag now 
    print.className = "userListUnit"; 
    print.innerHTML = "Name: " + this.name + ", age:" + this.age + ", depart: " + this.department; 
    if (nameButton === "addStudent") { 
     document.getElementById('studentList').appendChild(print); 
    } 
    else { 
     document.getElementById('teacherList').appendChild(print); 
    } 
    clearFields(); 
};

更改CSS行高度，以更大的东西像30px（因为我们要删除的br标签上面：

.userListUnit{ 
    vertical-align: middle; 
    border: 1px solid; 
    text-align: center; 
    line-height: 30px; 
    box-shadow: 5px 5px 5px #888888; 
    margin-bottom: 2em; 
}

就是这样，您现在可以简单地更改line-height属性，并且文本始终保持垂直对齐。

DEMO - 具有垂直-align

来源

2014-03-03 08:47:48 Nope

Thanx为你的答案太:) 但我想一个div，你必须硬编码.. –

@NevinMadhukarK：或使用一个或两个'position' /'table-cell'属性的变化。这是因为'div'是一个块元素，'vertical-align'属性用于'in-line level'和'table-cell'元素。根据[** W3C docs **]（http://www.w3.org/wiki/CSS/Properties/vertical-align）：'vertical-align属性会影响框的行框内的垂直位置由内联级元素生成 – Nope

在动态创建的div问题中垂直居中文本

回答

相关问题