Clever Geek Handbook

Limiting the background color to the width of the header

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

EDIT: If I were to use display: inline-block; why even though I am pointing text-align: center;

out my headings are still left aligned? Should I use float instead?

+3


source to share


4 answers


Or displaying as an inline-block might suit most use cases:



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

+2


source


Perhaps something like this:

In HTML:

<div id="Heading">
   <span id="HeadingText">HEADING TEXT</span>
</div>

In CSS:

#Heading
{
   /* Formatting of full heading */
}

#HeadingText
{
   /* Formatting for just heading text */
   background-color: #00ff00;
}


Guessing your question, this is not the answer you are looking for, but it might be helpful.

EDIT:

Alternatively, this should work as well. But I'm pretty sure this is what you want to avoid (inline, right?) ...

<h1 style="background-color:#660000; display:inline;">Heading<h1>
+1


source


This will solve this problem, I think:

<div id="Heading">
   <div id="HeadingText">HEADING TEXT</div>
</div>

And your css will be:

#Heading{
    background-color:#CCC;
}
#HeadingText{
    display:inline-block;
    background-color:#FF0000;
}
0


source


You must specify text-align: center; an attribute of the parent element containing your div block to center your header and its background with the display: inline block;

0


source






More articles:


All Articles