MobileRead Forums - View Single Post - Searching for a Grand Unified Field Theory of centering block-level elements

Rapunzel · 11-02-2018, 02:20 PM

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.

11-02-2018, 02:20 PM	#1
Rapunzel Junior Member Posts: 5 Karma: 10 Join Date: Nov 2018 Location: Wisconsin Device: PocketBook Touch Lux 3	Searching for a Grand Unified Field Theory of centering block-level elements 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.