0

I'm trying to style a volume of poetry in the EPUB format. The poems need to appear horizontally centred despite the width of the page and width of the poem being unknown.

I've managed to do this in two different ways by following a couple of the answers to this question: Centering div with unknown width.

Both methods work in Sigil and in my browser but fail differently in some major e-book reading environments.

I tried thirtydot's method:

HTML:

<div id="container">
    i'm as wide as my content
</div>

CSS:

body {
    text-align: center;
}
#container {
    text-align: left;
    border: 1px solid red;
    display: inline-block;
    /* for ie6/7: */
    *display: inline;
    zoom: 1;
}

Unfortunately, this seems to be problematic in Callibre, Adobe Digital Editions and the many e-reading software programs that use its engine, as the use of display: inline-block causes poems or verses using the style to flow over the edge of the viewport and the missing content is skipped over when moving on to the next page.

The method described by Nate B is also problematic in Adobe Digital Editions (as well as in Callibre, I believe):

#wrapper {
   position: relative;
   left: 50%;
   float: left;
}
#page {
   position: relative;
   left: -50%;
   float: left;
}

Adobe Digital Editions' implementation of margin:auto is apparently (see http://www.mobileread.com/forums/archive/index.php/t-161097.html) not compatible with its use to center align elements. Using the above method seems to place the poems off screen.

Is there any way of centering a div with an unknown width without using margin:auto, display:inline-block or javascript (which is not usually supported by many e-reading programs)?

Community
  • 1
  • 1
PrettyHands
  • 568
  • 4
  • 16
  • For e-books specifically, you might be better off going back to using `
    ` tags in your html. The only other solution is to set your `div` to 100% width and use `text-align: center`
     – gaynorvader Jan 15 '16 at 15:59
  • Thanks for your suggestion. I hadn't thought of reverting to now-deprecated tags, but it makes sense in the context of EPUBS. Unfortunately, I need to both center the poems and left-align the verse text. Using the center tag on the poem div and left-aligning the text seems to override the centering of the poem. – PrettyHands Jan 19 '16 at 22:17
  • Perhaps I should concentrate on solving the underlying issue I have: "the use of display: inline-block; causes poems or verses using the style to flow over the edge of the viewport and the missing content is skipped over when moving on to the next page." – PrettyHands Jan 19 '16 at 22:27

0 Answers0