[RbnJrg]

Originally Posted by hobnail

I suspect that the width, margin-left, and margin-right are not what they want; typically what's wanted is for the green box to automatically size itself to the size of the text (with a bit of space/padding/margin on the sides).

I vaguely recall banging my head against this a long time ago and never found a solution.

I posted my solution in order that it works everywhere. What you want, it can be achieved with the following code:

1. In your .xhtml file:

<div class="heading">
  <h1 class="block">CHAPTER 1</h1>
</div>

2. In your .css file:

.heading {
     text-align: center;
}

h1 {
    display: inline;
    font-size: 1.1em;
    font-family: sans-serif;
    margin: 1em auto;
}

.block {
    display: inline-block;
    background: teal;
    color: white;
    padding: 0.25em 1em;
}

The trick here is to display the <h1> as inline text, so the property "text-align: center" (for the container div) can work. And to get the colored box to automatically size itself to the size of the text (with a bit of space/padding/margin on the sides) is necessary to employ the property "display: inline-block". The issue here is that you need to use margin-left and margin-right as "auto" and that property is not supported by ADE (for epub 2) So, if you want a solution for any reader, you need to use my first approximation.



I attach the respective epub so you can check everything.