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:
Code:
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
Code:
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:
Code:
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:
Code:
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
)