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

时间:2014-03-03 08:13:08

标签: javascript html css css3

创建一个简单的应用程序,动态添加学生和教师。

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

2 个答案:

答案 0 :(得分:3)

试试这个:

.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

答案 1 :(得分:1)

如果将块元素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的内嵌标记