04-22-2013, 07:57 AM | #1 |
Member
Posts: 18
Karma: 1210
Join Date: Apr 2013
Device: Nexus 7
|
Help with centering DIV and IMG
I have a question regarding why my images/captions refuse to display as centered (horizontally) when I open them in Adobe Digital Editions or Aldiko, when they display correctly in Sigil. This is driving me crazy. I have read a lot on the issue of centering, and I can't figure out what's going on with ADE/Aldiko.
I'm using this method: <div> <p><img>caption</p> </div> (it doesn't work when the <img> is placed outside the <p> either) body {text-align:center;padding:0;margin:0;} div.centered { width:75%; margin-left:auto; margin-right:auto; text-align:center; } p.caption { width:100%; text-align:center; padding-bottom:1em; } img.pic { width:100%; display:inline-block; text-align:center; } I've set the width of the div to a percentage, margins as auto, text-align as center, yet the div (with its image and text) STILL aligns left in ADE/Aldiko. Any ideas? Thanks. |
04-22-2013, 08:49 AM | #2 |
Member
Posts: 18
Karma: 1210
Join Date: Apr 2013
Device: Nexus 7
|
Well, as is so often the case, I solved my own problem soon after posting this. The solution, it seems, to centering a div is to wrap the entire div in another div. The CSS for the wrapper div is:
.wrapper { width:100%; text-align:center; } Then everything inside the wrapper div will be centered, and display correctly in ADE and Aldiko. |
Advert | |
|
04-22-2013, 09:25 AM | #3 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
A second div would actually not be required, I almost never need on. In fact, I almost never need on.
<p class="center"><img /><br />CAPTION</p> with a definition of: .class { text-align: center; text-indent: 0;} should already work. It does for me. |
04-22-2013, 09:28 AM | #4 |
Grand Sorcerer
Posts: 27,532
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
I don't see how the example you (the OP) gave would display correctly, even in Sigil. Unless perhaps you simply omitted the class attributes from the html elements in your example code just to save time?
|
04-22-2013, 10:54 PM | #5 |
Member
Posts: 18
Karma: 1210
Join Date: Apr 2013
Device: Nexus 7
|
Well, I don't know what to say other than the solution I gave (wrapping the div in a div) solves my problem. Without it, the div aligns to the left in Adobe Digital Editions and Aldiko.
And yes, I omitted the classes in my HTML example, sorry. It makes sense... the attribute text-align:center only affects the contents of the div, not the div itself, right? So a wrapper div with text-align:center will center everything its wrapped around. Perhaps this is a bug in ADE? I don't know. |
Advert | |
|
04-22-2013, 11:21 PM | #6 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
@rhino79: I think it is because ADE does not honor auto-margins, and sets them to zero.
The paragraph method that Toxaris suggested works to keep the image centered, but if you want a div -- Since you are setting a width anyway, try setting a specific margin, such as this: Code:
div.centered { width: 75%; margin-left: 12.5%; margin-right: 12.5%; text-align: center; text-indent: 0; } Last edited by GrannyGrump; 04-22-2013 at 11:28 PM. |
04-23-2013, 03:50 AM | #7 |
Member
Posts: 18
Karma: 1210
Join Date: Apr 2013
Device: Nexus 7
|
Aha! Thanks grannyGrumpy. I can confirm the "auto" margins were the culprit. I changed the margins to equal percentages and the div is centered without the use of a wrapper. Thanks!
|
04-23-2013, 09:39 AM | #8 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
I know it's "in the spec" that uto can be treated as zero. Obviously that causes issues when it is not consistently applied between readers. Since the whole goal of a "standard" is to ....standardize.... the way things are done you would think that those on the spec writing board at IPDF would correct this.
Does anyone know if, in fact, this issue is being addressed? |
04-23-2013, 11:01 AM | #9 | |
Well trained by Cats
Posts: 29,754
Karma: 54401244
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
If you WANT it, define it. |
|
Tags |
alignment, centering, div tags, img |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Centering blockquotes | ghostyjack | ePub | 6 | 07-17-2014 06:07 AM |
Nook not centering anything. why? | kateharp | ePub | 0 | 05-11-2011 10:53 PM |
Centering PDF | nguirado | Amazon Kindle | 5 | 10-04-2010 08:45 PM |
How to do centering | sjohnson717 | Calibre | 15 | 02-28-2010 09:20 AM |
Bookdesigner - Centering Title Author... | davers | Workshop | 7 | 01-12-2009 04:21 PM |