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

如果要调整它，只需修改行高......

看看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 - 使用带有竖线-align的内嵌标记

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

2 个答案: