Reply
Contributor
LizCastro
Posts: 6
Registered: ‎05-06-2011
0 Kudos

Centering text and images in NOOK EPUB books

If you're having trouble centering text or images in a NOOK book, you may find this blog post helpful:

 

http://www.pigsgourdsandwikis.com/2012/03/centering-in-ebooks-across-ereaders.html

 

Basically, NOOK and other ADE-based ereaders don't properly support CSS by centering div elements whose left and right margins are set to auto, as they should.

 

The solution for centering divs (and the images and text that they contain), is to wrap the elements in a div whose text-align is set to center, and then set the display property to inline-block for the inner elements. Many more details at the blog post above.

 

Hope that's helpful.

 

Liz

(Author: EPUB Straight to the Point, and several other guides to formatting ebooks)

Correspondent
Strayer
Posts: 653
Registered: ‎05-28-2011
0 Kudos

Re: Centering text and images in NOOK EPUB books

I didn't do any of that and my text and pictures are lovely on the Nook. Also on Kindle. I used page break and center for the images and left with first line indent for the text.
Contributor
LizCastro
Posts: 6
Registered: ‎05-06-2011
0 Kudos

Re: Centering text and images in NOOK EPUB books

That's fine if you're just centering individual bits of text and images (inside a p, for example). The problem is if you want to center the p itself.

Frequent Contributor
chezjim
Posts: 60
Registered: ‎10-19-2010
0 Kudos

Re: Centering text and images in NOOK EPUB books

And centering tables is a dog.

 

Part of this is XHTML, which won't let you use the (wonderfully logical) "Center" tag. But the blog points out the ereaders don't help either.

 

Very useful (though I haven't tried it yet). Thanks for posting it.

Jim Chevallier
North Hollywood, CA
http://www.chezjim.com
"Monologues for Teens and Twenties", "How to Kill a Peacock", "Paris Poems", "August Zang and the French Croissant", "Suicide Monologues for Actors and Others", etc.
Frequent Contributor
chezjim
Posts: 60
Registered: ‎10-19-2010
0 Kudos

Re: Centering text and images in NOOK EPUB books

OK. Now I've adapted the info from the above to use with tables. Strict XHTMLers seem to object to the use of tables for anything but tabular data, but it's the best way I've found to keep an image and a caption together with the caption being formatted appropriately (one could apply special margins and centering to the caption, I suppose).

 

Before showing how I did this, I should point out that Nook's special previewer does NOT seem to entirely take this into account, so so far it's an imperfect solution. But it's the best I've found so far.

 

First, you need to set up (in your CSS or in the styles embedded in your actual file) the right classes:


.wrap {text-align:center}
.center {text-align:center; width: 60%; background: yellow; display:inline-block}
.xctcntr {text-align: center; display:inline-block }

 

Then in the body where you have the table, create both a special DIV and the table itself as follows:


<div class="wrap">
<table class="xctcntr">

 

With the appropriate closing tags of course as well.

 

Note that you don't need the "background: yellow" for a standard table, but you might want to leave that until you've verified that the table is centering properly (which is easier to see with the yellow background).

Jim Chevallier
North Hollywood, CA
http://www.chezjim.com
"Monologues for Teens and Twenties", "How to Kill a Peacock", "Paris Poems", "August Zang and the French Croissant", "Suicide Monologues for Actors and Others", etc.
New User
cathy345
Posts: 4
Registered: ‎12-05-2013
0 Kudos

Re: Centering text and images in NOOK EPUB books

[ Edited ]

Strayer wrote:
I didn't do any of that and my text and pictures are lovely on the Nook. Also on Kindle. I used page break and center for the images and left with first line indent for the text.

:smileyvery-happy:Nice method.