Vertically centering a text within a dynamically created div issue

Question

Am creating a simple app for adding dynamically students and teachers.

Am adding div's dynamically on click.

I have added the class "userListUnit" to that div.

This is the 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();
    };

This is the CSS:

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

My Fiddle: http://jsfiddle.net/LPu9x/7/

Try adding a student or a teacher and check the position of the text within the dynamically created div,then you will understand its not vertically center. Any1 got any ideas to clear this out?

Conditions:

1) No position : absolute.

2) Div's created should still come below one after another.

Updated Fiddle Solution : http://jsfiddle.net/LPu9x/8/

How about using `display: table-cell;` [this](http://stackoverflow.com/questions/18649106/div-vertical-align-middle-css/18649137#18649137)? — Mr. Alien, Mar 03 '14 at 08:14
I tried that... the blocks appear on the right side ,rather than below one after the other. — Nevin Madhukar K, Mar 03 '14 at 08:15
The block is now coming below 1 after the other,but the text aint aligned in the center vertically. — Nevin Madhukar K, Mar 03 '14 at 08:19
Use `vertical-align;` on `display: table-cell;` and not on `display: table;` — Mr. Alien, Mar 03 '14 at 08:22
`vertical-align` seems to be intended for inline elements so using it on block elements such as a `div` needs some work. Have a look at the linked resource which explains why aligning text in `div` elements is not working as expected by default and how to get around it, though I have a feeling not wanting to apply changes to your `position` attribute might not be a choice (not 100% sure on that though and you might find using table attributes will end up working). [**http://phrogz.net/CSS/vertical-align/**](http://phrogz.net/CSS/vertical-align/) — Nope, Mar 03 '14 at 08:23
@Mr.Alien Erm.. that totally made it wrong. Could you mess around with the fiddle i made? Its easier if you do it than me trying it out 1 by 1. — Nevin Madhukar K, Mar 03 '14 at 08:25

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

Try this :

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

If you want to adjust it, just modify the line-height...

Have a look here

edited May 23 '17 at 10:26

Community

1
1

answered Mar 03 '14 at 08:27

Daniel Bejan

1,468
1
15
39

What was the mistake that i did? – Nevin Madhukar K Mar 03 '14 at 08:29
Well, you did't set a hight..so the line-height was "confused" :)) – Daniel Bejan Mar 03 '14 at 08:30
2

@NevinMadhukarK: There is no mistake, this answer is "semi-cheating" by making the box a fixed height of `30px` and adding a top padding of `5px`. This is "hard-coding", giving the illusion of centred text. This is not true vertical alignment, as the `vertical-align` attribute has nothing to do with this anymore :) This is not a dynamic solution and changes to the line-height or height need adjusting on the padding too. Though,..what ever works works +1 for getting it to work in this set scenario :) – Nope Mar 03 '14 at 08:32
@FrançoisWahl Yup true.. but is there any other solution for this? Like a dynamic one..? – Nevin Madhukar K Mar 03 '14 at 08:38
@NevinMadhukarK: If you want to use the `vertical-align` attribute to do it dynamically I think (but not 100% certain) you need to use `position` changes when in a `div` element which would not be something you wanted I think, see the article I linked in the comments on the question for details on that. This answer is most likely the best given your specific scenario/conditions. – Nope Mar 03 '14 at 08:40
@FrançoisWahl Yeh,i have read that it could be done like changing the position to absolute and set it. But am not a fan of absolute. – Nevin Madhukar K Mar 03 '14 at 08:42

score 1 · Answer 2 · answered Mar 03 '14 at 08:47

If changing the block element div to an inline element p is not an issue you could do that and vertical-align will work as expected. Off course, also remove any nested br tags as CSS should be used for that, i.e: padding/margin.

If you can change the tag to a p your script looks like this:

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

Change CSS line-height to something bigger like 30px (as we are removing the br tags above:

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

That's all. You can now simply change the line-height attribute and the text will always stay vertically aligned.

DEMO - Using an in-line tag with vertical -align

@NevinMadhukarK: That or using a both or either `position` / `table-cell` attribute changes. That is as the `div` is a block element and the `vertical-align` attribute is intended for `in-line level` and `table-cell` elements. As per the [**W3C docs**](http://www.w3.org/wiki/CSS/Properties/vertical-align): `The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.` — Nope, Mar 03 '14 at 08:53

Vertically centering a text within a dynamically created div issue

2 Answers2