I’m not understanding, though, when to use min-height. If I’m setting a fixed height and line height for a full-width toolbar at the top, would responsiveness be an issue?

Thanks for the tutorial!

http://codepen.io/anon/pen/CmlDL

It’s based on inline-block and the use of pseudo-element.

Excellent tricks!
I tried to apply some of them in my responsive template. But here it doesn’t work as expected. The problem is:
1. I have 4 floating divs

#submain_line{
    min-height: 10rem;
    background: #444;
}
.container{
    max-width: 1000px;
    margin: 0 auto;
}
.box{
    width: 24%;
    float: left;
    margin: 0.5%;;
    background: #666;
    color: #ddd;
    font-size: 0.8rem;
}
.box_content{
    margin: 0.5rem;
}

In responsive parts the width of boxes are set to 49%, resp. 100% and all boxes are floating left.
I tried to make all boxes of the same height. In full width of the page the style

  display: inline-block;
  text-align: left;

works fine. But on narrower displays the boxes responsivity is ignored and they stay always 4 in one row.
What’s wrong here?

If the height of the parent is known, I usually add that as a line-height on that parent and inline block the child, so the height of the child can be variable. If the height of the parent is unknown I usually absolutely positioned child and move it around as need be.

Do you know if there are any options to vertically center text based on its x-height instead of the entire height of the text? When the container is slightly larger than the font-size this might be preferred.

The option I could think of only works for a single line of text and consists of adding a pseudo element with height set to the height of its container and vertical-align: middle; applied.

See http://codepen.io/ckuijjer/pen/nIGCt

By the way, i like this tweet: “The easiest way to vertically center something in CSS is to close your laptop and go to the bar.” @bleikamp

:)

I always used the line-height for vertical alignment for texts. Otherwise, I think of using Javascript to align elements while loading the page ;-) but that’s not the right way! Thanks for the article!

Just sayin’.

Awesome decision tree idea!

Appearntly there is a fix by adding preserve-3d to the parent.

Life just got better :-)

Thx Chris for serving a very useful guide!