Why this trick centers text vertically in dynamic height div (and why it breaks)?

Question

I found this stackoverflow answer very interesting. It works to vertically center text of any length in a div of any height. Basically it uses a empty  tag directly in front of the node containing text, and

HTML:

<div>
    <span></span><p>This is really really long text but it will be centered vertically.</p>
</div>

CSS:

div { 
    background: yellow; 
    color: red;
    width: 200px;
    text-align: center; /* horizontally center */
    height: 300px; /* any height */
    padding: 0 20px
}

div span:first-child {
    height: 100%;
    vertical-align: middle;
    display: inline-block; 
}

div p {
    margin: 0;        
    vertical-align: middle;
    display: inline-block; 
}

Also even more interesting is if you separate closing span tag () and opening paragraph tag () on two separate lines, or if you add a whitespace between the two, the trick breaks.

My question is - how does this trick work? How is span helping center the text? And why does it break when a newline/whitespace is added in HTML between closing  tag and opening  tag?

I have created a fiddle to demonstrate both points: https://jsfiddle.net/axRxE/385/

there were two answers to this questions? why did they get deleted??? — codneto, Mar 09 '16 at 08:50

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

My question is - how does this trick work? How is span helping center the text?

Since you give the span inline-block property, the span then inherits it's parent height (with height: 100%) - which in you example is a fixed 300px. And since you gave also the same property to the paragraph, those two elements are one next to each other. See an example:

#parent {
  height: 300px;
}
span {
  height: 100%;
  display: inline-block;

  /* some width and background-color for demonstration */
  width: 5px;
  background-color: red;
}
p {
  margin: 0;
  display: inline-block;
}

<div id="parent">
  <span></span>
  <p>foobar</p>
</div>

And you also put vertical-align: middle (which works with inline-block) on both of them, which gives them that align (you only need to add that property to the larger one):

#parent {
  height: 300px;
}
span {
  height: 100%;
  display: inline-block;

  /* some width and background-color for demonstration */
  width: 5px;
  background-color: red;

  /* added vertical-align */
  vertical-align: middle;
}
p {
  margin: 0;
  display: inline-block;
}

<div id="parent">
  <span></span>
  <p>foobar</p>
</div>

And why does it break when a newline/whitespace is added in HTML between closing  tag and opening  tag?

That's simple - when you use inline-block there is always a whitespace issue between them. And since you didn't add some width to the paragraph, it takes all the width it can take, and with that additional width from the whitespace, the paragraph goes below the span.

In your example, your parent has 120px width, the span uses 0px, so the paragraph takes all of the parents width, which is 120px. Now, with the additional whitespace (which is ~ 4px), since she paragraph uses all the width, the whitespace doesn't fit so the paragraph "breaks" - it goes below the span.

Also check:

nice explanation. +1 for the links. – codneto Mar 10 '16 at 11:33 — codneto, Mar 10 '16 at 11:33

Why this trick centers text vertically in dynamic height div (and why it breaks)?

1 Answers1