Currently, I am in the process of developing a straightforward application that allows for the dynamic addition of students and teachers.
I am dynamically adding divs with a click function.
To these dynamically created divs, I have assigned the class "userListUnit."
Below is the Javascript (JS) code:
SchoolAdmission.prototype.display = function(nameButton) {
var print = document.createElement("div");
print.className = "userListUnit";
print.innerHTML = "Name: " + this.name + ", age:" + this.age + ", department: " + this.department + "<br><br><br>";
if (nameButton === "addStudent") {
document.getElementById('studentList').appendChild(print);
}
else {
document.getElementById('teacherList').appendChild(print);
}
clearFields();
};
And here is the accompanying Cascading Style Sheets (CSS):
.userListUnit{
vertical-align: middle;
border: 1px solid;
text-align: center;
line-height: 10px;
box-shadow: 5px 5px 5px #888888;
margin-bottom: 2em;
}
Here's the link to My Fiddle: http://jsfiddle.net/LPu9x/7/.
Feel free to try adding a student or a teacher and observe the vertical positioning of the text within the dynamically created div. You'll notice it's not perfectly centered vertically. Would appreciate any insights on how to resolve this issue?
Constraints:
1) Avoid using position: absolute.
2) Ensure that created divs are still displayed sequentially below one another.
Find the Updated Fiddle Solution Here: http://jsfiddle.net/LPu9x/8/