Vertically centred text in CSS

Internet
PonPonPon!

As a guy who knows zippo about web design, I just discovered something incredible. If you want to vertically centre a line of text in a block level element, simply define the line-height equal to the height of the container.

#SomeContainer {
  display:block:
  height:128px;
  line-height:128px; /* vertical */
  text-align:center; /* horizontal */
  width:128px;
}

Assuming you’re not parsing this in a blog aggregator that strips out CSS from RSS feeds (how’s that for some TLA TLC) you should see an example of it on the right.

Author bio and support

Me!

Ruben Schade is a technical writer and infrastructure architect in Sydney, Australia who refers to himself in the third person. Hi!

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite bespoke cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or send a comment. Thanks ☺️.