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 IaaS engineer in Sydney, Australia who refers to himself in the third person in bios. Wait, not BIOS… my brain should be EFI by now.

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

You can leave me a comment by contacting me, and I might publish your thoughts. Please read the FAQs first though.

If you found this post helpful or entertaining, you can shout me a coffee or buy some silly merch. Thanks!