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

Question

正在创建一个用于动态添加学生和教师的简单应用。

点击时动态添加 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/

Answer 1

试试这个：

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

如果你想调整它，只需修改 line-height...

看看here

Answer 2

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

如果您可以将标签更改为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 - 使用带有垂直对齐的内联标签

---