Css h1 - text width only

Question

I have an H1 style for my site:

.centercol h1 { color: #006bb6; font-weight: normal; font-size: 18px; padding:3px 3px 3px 6px; border-left:3px solid #c6c1b8; background:#f2efe9; display:block; } 

The background color covers the entire width of centercol, 500px ...

How to make this H1 cover only the width of the text H1?

Answer 1

You can use the value of the built-in block for display, however in this case you will lose the function of the block h1, i.e. siblings will be displayed on the line with h1 if they are inline elements (in this case you can use the break line
)

 display:inline-block; 

Answer 2

You can use display:inline-block to force this behavior

Answer 3

Use display: table !
It does not break crash like display: inline-block or float: left .

Answer 4

An easy fix for this is to put your H1 element to the left:

 .centercol h1{ background: #F2EFE9; border-left: 3px solid #C6C1B8; color: #006BB6; display: block; float: left; font-weight: normal; font-size: 18px; padding: 3px 3px 3px 6px; } 

I put together a simple jsfiddle example that shows the effect of the "float: left" style across the width of your H1 element for anyone looking for a more general answer:

http://jsfiddle.net/zmEBt/1/

Answer 5

This is because your <h1> is the width of the center. Specify the width in <h1> and use margin: 0 auto; if you want it to be centered.

Or, alternatively, you can float <h1> , which will make it even than text.

Answer 6

Like other suggestions, you can use the following code. However, if you go to the field: 0 auto; I would recommend that the margin for the top and bottom of H1 be set to something other than 0. So, maybe margin: 6px auto; or something like that.

 .centercol h1{ display: inline-block; color: #006bb6; font-weight: normal; font-size: 18px; padding:3px 3px 3px 6px; border-left:3px solid #c6c1b8; background:#f2efe9; display:block; } 

Answer 7

align-self-start, align-self-center ... in flexbox

 .centercol h1{ background: #F2EFE9; border-left: 3px solid #C6C1B8; color: #006BB6; display: block; align-self: center; font-weight: normal; font-size: 18px; padding: 3px 3px 3px 6px; } 

Answer 8

You can use <span> instead of <h1> .