Centering and adjusting the width of a block

[Jellby]

Hi all,

This is more about CSS than ePUB, but I want it to work in ePUB readers, so I guess I can ask here anyway.

The thing is I have the chapter titles in an ePUB defiened just with <h1>Chapter 1</h1>, and want them to appear horizontally centered and with a line below that extends a bit (say 1em) left and right. What rules could I use in the CSS for h1 {} ?

Let's see:

  text-align: center;
  border-width 0 0 2px 0;

is no good. The title is centered, but the line extends all the way to left and right borders of the page

  text-align: center;
  border-width 0 0 2px 0;
  margin: 0 1em 0 1em;

is better, but still the margin is measured from the page border inwards, and I want it to be measured from the text limit outwards. In fact, this works:

  text-align: center;
  border-width 0 0 2px 0;
  padding: 0 1em 0 1em;
  display: inline;

but the text is not centered in the page, and the vertical spacing is screwed (that's what you get with an inline element).

At the end I found this to work in the browser:

  border-width 0 0 2px 0;
  margin: auto;
  padding: 0 1em 0 1em;
  display: table;

But alas! It doesn't work in ADE, the chapter title is displayed twice instead, and left-aligned.

Does anyone have any solution?

(and no, text-decoration: underline is no solution for this )

[kovidgoyal]

wrap the text inside <h1> in a <span> and use border on that

[Jellby]

Originally Posted by kovidgoyal

wrap the text inside <h1> in a <span> and use border on that

Thanks, but that somehow defeats separation of content and presentation, doesn't it?

[kovidgoyal]

Use text-decoration: underline