Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

Quick and Dirty Vertical Centering for Headers.

11.9.2012

Need a quick and dirty way to vertically center a header? Check this out:

I'm a header!

If you give an element a larger line-height than its text-size, the browser will automatically center the text inside the extra space.

.v-center-demo { 
  border: 1px dashed #FFFFFF; 
  font-size: 130%;
  line-height: 200%;
  padding: .25em;
  }

Beware that this will start to look pretty ugly if there is more than one line of text in the element.

Permalink

Tags: code css web-development

Authorized users may log-in to leave a comment.

Last Blog: Advice for Job Seekers.

Next Blog: Cracking the USPS Code.