Searching for a Grand Unified Field Theory of centering block-level elements

[Rapunzel]

I realize that this question has been discussed at length over many years, but I’m still searching for a way to successfully center a block of left-aligned text with an unknown width in an epub. It’s not critically important, but I like it when the ebooks in my personal library look nice.

I have tried the following things:

Margin: auto

According to the epub standard, devices are free to interpret auto as 0. I haven’t actually found one that doesn’t do this.

Outer wrapper div with text-align: center, inner wrapper div with display: inline-block and text-align-left

This one is so close to working. It centers the text beautifully on my PocketBook ereader, but the inline part of inline-block prevents page breaks. This is all right for very short fragments of poetry, even if it sometimes leads to premature page breaks, but a longer poem just cuts off at the bottom of the page. Not cool.

Same as above, except using display: inline-table, table-row, and table-cell

Same behavior and problems as above. Centers the blocks just fine, but can’t paginate.

Floating divs with +/- 50% positioning

<div style="float: left; left: 50%; position: relative;"><div style="float: left; left: -50%; position: relative;">

The problem with this one might just be my device. The divs’ contents get squashed up against the left side of the page (or right, if I used float: right and right positioning).

Transform: translateX

<div style="position: relative;"><div style="left: 50%; transform: translateX(-50%); position: absolute;">

As with any absolutely positioned element, it overlaps the content that comes after it. Also not cool.

Flex

Flex is some powerful magic in web design, but to the best of my knowledge it’s not part of the EPUB standard.

Viewport units

I’ve lost the code I used to attempt this, mostly because when I loaded a test epub onto my device and opened it up to see what happened, the reading app crashed.

At this point, I have exhausted my knowledge of CSS and Google searching. If anyone else a fresh idea, or can confirm that the Grand Unified Field Theory of centered blocks of text is out of reach, I would be grateful.

[Turtle91]

FWIW, here is the code I use to center a block and then left-align the text. I usually use it for quotes, epigraphs, etc. I haven't had any issues with it, but I also haven't tested it on other devices/apps.

/* Centered & Left-aligned text */
div.quote       {margin:2em 0; 
                 float:left; 
                 position:relative; 
                 left:50%; 
                 clear:both}

div.quote p     {display:block; 
                 text-indent:0; 
                 font-size:.85em; 
                 text-align:left; 
                 position:relative; 
                 left:-50%; 
                 padding:0 2em; 
                 margin:0}

div.quote p.sig {margin:1em 0 0; text-align:right} /* For signature line */



<div class="quote">
<p>This is a paragraph of some sort. It can be of any length. The div will be centered on the page with the text left aligned within the div.</p>
<p>You can adjust the padding to give more/less space on either side.</p>
<p class="sig">From the <em>Memoirs of Dion</em></p>
</div>

Cheers,

[RbnJrg]

Originally Posted by Rapunzel

...I’m still searching for a way to successfully center a block of left-aligned text with an unknown width in an epub.

According to the example you posted about the method you're currently using, actually you are using a width of 100% and with padding, you are adding some space on left and right margins. So, instead of using "padding" you can use the property "width" (i.e. 90%) and margins (left and right) of 5%.

/* Centered & Left-aligned text */
div.quote {
    margin: 2em 5%;
    width: 90%;
}

div.quote p {
    text-indent: 0;
    font-size: .85em;
    text-align: left;
    margin: 0;
}

div.quote p.sig {
    margin: 1em 0 0;
    text-align: right;
} /* For signature line */

  <div class="quote">
    <p>This is a paragraph of some sort. It can be of any length. The div will be centered on the page with the text left aligned within the div.</p>

    <p>You can adjust the width of the block (and margins) to give more/less space on either side.</p>

    <p class="sig">From the <em>Memoirs of Dion</em></p>
  </div>

Of course, the width of the text block plus left and right margins must be 100%

Regards
Rubén

[Klecks]

The method "floating divs" works with the calibre editor and sigil, but not for ADE. (I tried ADE 2.0.1)
The text in ADE gets squashed against the left side of the page. (see first example)
The method "Outer wrapper div with text-align: center, inner wrapper div with display: inline-block and text-align-left" works for me (see second example), but only for short text fragments. Long text is running off page.
Sorry, I have no solution for this problem.

Regards
Klecks.

[Klecks]

update:

I just tried the "floating divs" method on my eBook readers (ADE, up-to-date firmware).
Tolino has the text squashed against the left side of the page.
The Pocketbook has the text running off the page (see screenshot).

Klecks.

[Rapunzel]

Sorry I haven't been responding: work got super busy with a client deadline.

The specific use case I have is poetry that I want to center on the page. So solutions like RbnJrg's aren't exactly what I'm looking for. I don't want to put a width on the text because it'll either be too narrow (forcing line breaks even though there appears to be plenty of available whitespace left on the page) or too wide (text is off-center). I've used the margin + width + margin method successfully on quoted blocks of prose text. It's just the poems, with short unpredictable line lengths that I'm stuck on.

@Klecks: I know :/ I had high hopes for the floating divs method. I mocked it up in an HTML file that Chrome displayed perfectly, and the CSS is simple enough that I hoped my PocketBook would support it. Sadly, no. And like you said, inline-block only works for shorter pieces of text.

At this point I'm about ready to conclude that there is no nice, pretty, reliable way to center poetry on the page. Phooey.

[RbnJrg]

Originally Posted by Rapunzel

At this point I'm about ready to conclude that there is no nice, pretty, reliable way to center poetry on the page. Phooey.

Maybe there could be something. Please, post an example of the poetry you want to center.

[Rapunzel]

Here's a snippet of "The Queen of Air and Darkness" by Poul Anderson. My ereader's font settings are usually but not always Bookerly at 25pt. The poem cuts off near the end of the fifth stanza.

<html>
<head>
	<title>Poem test</title>
	
	<style type="text/css">
		p {
		  margin: 0;
		  padding-bottom: 10pt;
		  text-indent: 15pt;
		}
		
		p.hang {
		  padding: 0;
		  margin-left: 15pt;
		  text-indent: -15pt;
		}
		
		div.blockwrapper {
		  text-align: center;
		}
		
		div.blockcontent {
		  display: inline-block;
		  text-align: left;
		}
	</style>
<head>

<body>
	<div class="blockwrapper">
		<div class="blockcontent">
			<p class="hang">“It was the ranger Arvid rode</p>
			<p class="hang">homeward through the hills</p>
			<p class="hang">among the shadowy shiverleafs,</p>
			<p class="hang">along the chiming rills.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“The night wind whispered around him</p>
			<p class="hang">with scent of brok and rue.</p>
			<p class="hang">Both moons rose high above him</p>
			<p class="hang">and hills aflash with dew.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“And dreaming of that woman</p>
			<p class="hang">who waited in the sun,</p>
			<p class="hang">he stopped, amazed by starlight,</p>
			<p class="hang">and so he was undone.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“For there beneath a barrow</p>
			<p class="hang">that bulked athwart a moon,</p>
			<p class="hang">the Outling folk were dancing</p>
			<p class="hang">in glass and golden shoon.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“The Outling folk were dancing</p>
			<p class="hang">like water, wind and fire</p>
			<p class="hang">to frosty-ringing harpstrings,</p>
			<p class="hang">and never did they tire.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“To Arvid came she striding</p>
			<p class="hang">from where she watched the dance,</p>
			<p class="hang">the Queen of Air and Darkness,</p>
			<p class="hang">with starlight in her glance.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“With starlight, love and terror</p>
			<p class="hang">in her immortal eye,</p>
			<p class="hang">the Queen of Air and Darkness—”</p>
		</div>
	</div>
</body>
</html>

[Turtle91]

Just an aside about class names...

I find it much easier to NOT give a class name to the predominate tag (eg <p>) and only give a class to those items that are the exception (eg <p class="last">). That avoids clutter/bloat and makes it much easier for a human editor to determine when there is something special happening.

For example:

<html>
<head>
	<title>Poem test</title>
	
	<style type="text/css">
		p.last {
		  margin: 0;
		  padding-bottom: 10pt;
		  text-indent: 15pt;
		}
		
		p {
		  padding: 0;
		  margin-left: 15pt;
		  text-indent: -15pt;
		}
		
		div.blockwrapper {
		  text-align: center;
		}
		
		div.blockcontent {
		  display: inline-block;
		  text-align: left;
		}
	</style>
<head>

<body>
	<div class="blockwrapper">
		<div class="blockcontent">
			<p>“It was the ranger Arvid rode</p>
			<p>homeward through the hills</p>
			<p>among the shadowy shiverleafs,</p>
			<p>along the chiming rills.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“The night wind whispered around him</p>
			<p>with scent of brok and rue.</p>
			<p>Both moons rose high above him</p>
			<p>and hills aflash with dew.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“And dreaming of that woman</p>
			<p>who waited in the sun,</p>
			<p>he stopped, amazed by starlight,</p>
			<p>and so he was undone.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“For there beneath a barrow</p>
			<p>that bulked athwart a moon,</p>
			<p>the Outling folk were dancing</p>
			<p>in glass and golden shoon.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“The Outling folk were dancing</p>
			<p>like water, wind and fire</p>
			<p>to frosty-ringing harpstrings,</p>
			<p>and never did they tire.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“To Arvid came she striding</p>
			<p>from where she watched the dance,</p>
			<p>the Queen of Air and Darkness,</p>
			<p>with starlight in her glance.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“With starlight, love and terror</p>
			<p>in her immortal eye,</p>
			<p>the Queen of Air and Darkness—”</p>
		</div>
	</div>
</body>
</html>

FWIW...

Cheers,