Question

I imagine this is straight forward, but I haven’t been able to work out how to do it. I would like to center some text in a div, and then apply a background color to just the width of the text, without having to enter a width for the div (so that the background color is automatically the width of the text)

At the moment my CSS looks like this:

.heading {
text-align: center;
background-color:red;
}

which centers the text, but makes the background of the entire line on the page red.

When I add display:inline the background is just the width of the text, but the text is no longer centred.

Could someone help with this?

Thanks,

Nick

Answer 1

Wrap your text inside .heading in a span and then:

.heading {
  text-align: center;
}

.heading span {
  background-color:red;
}