Html – Limiting background-color to width of heading


I am trying to get a background color to stick strictly to the text of the heading and not span the entire width of the page. I understand that block level elements take up the entire width of the page, so I was wondering if there was a way around this besides forcing inline styles.

EDIT: If I were to use display: inline-block; why is it that even though I specify text-align: center; my headers are still left aligned? Should I use a float instead?

Best Solution

Or displaying as an inline-block could meet most use cases:

h1 { background-color: red; display: inline-block; }

Related Question