Quote:
Originally Posted by ElMiko
In the attached file, I have some blockquoted poetry that i want to be left aligned within its block, but the whole block to be centered within the page.
My approach is to inline-block the <blockquote>, and wrap it in a "text-align: center; display: block;" <div> container.
Unfortunately, this is causing two very undesirable behaviors:
1) if the whole blockquote wouldn't fit in the remaining space on the page, the whole element gets pushed to the next page, rather than displaying as many lines as can fit on the first page, and then flowing the rest of the text to the second page.
2) if the whole blockquote is longer than the screen, it will just cutoff whatever text is more than fits on a single screen length.
Anybody have any ideas as to howI can get the alignment behavior I'm looking for without all of these non-reflowing effects?
|
I've fixed the errors in the code and fixed your poetry. Have a look at the CSS to see what I've done.
1. That issue is fixed
2. I've fixed it so if the text does not fit on the screen, it will wrap to the next screen. There's no way to change this.
I've dropped the <div> that you don't need or want. I've also changed the classes you use. Now if a line is too long for the screen, it will wrap with an indent to show it's part of the same line. Now you will see that the ePub looks good.