View Full Version : Centering and adjusting the width of a block


Jellby
04-09-2009, 11:52 AM
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 :D)

kovidgoyal
04-09-2009, 12:05 PM
wrap the text inside <h1> in a <span> and use border on that

Jellby
04-09-2009, 12:28 PM
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? :undecided

kovidgoyal
04-09-2009, 12:38 PM
Use text-decoration: underline