Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 04-22-2013, 07:57 AM   #1
rhino79
Member
rhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheese
 
Posts: 16
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.
rhino79 is offline   Reply With Quote
Old 04-22-2013, 08:49 AM   #2
rhino79
Member
rhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheese
 
Posts: 16
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.
rhino79 is offline   Reply With Quote
Old 04-22-2013, 09:25 AM   #3
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,006
Karma: 3594657
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
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.
Toxaris is offline   Reply With Quote
Old 04-22-2013, 09:28 AM   #4
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 9,267
Karma: 42123822
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?
DiapDealer is offline   Reply With Quote
Old 04-22-2013, 10:54 PM   #5
rhino79
Member
rhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheese
 
Posts: 16
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.
rhino79 is offline   Reply With Quote
Old 04-22-2013, 11:21 PM   #6
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 565
Karma: 2634542
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;
}
(I always add the zero indent to make sure nothing causes the contents to be indented and thus display off-center)

Last edited by GrannyGrump; 04-22-2013 at 11:28 PM.
GrannyGrump is offline   Reply With Quote
Old 04-23-2013, 03:50 AM   #7
rhino79
Member
rhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheese
 
Posts: 16
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!
rhino79 is offline   Reply With Quote
Old 04-23-2013, 09:39 AM   #8
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
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?
Turtle91 is offline   Reply With Quote
Old 04-23-2013, 11:01 AM   #9
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 14,854
Karma: 5654321
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by grannyGrumpy View Post
@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;
}
(I always add the zero indent to make sure nothing causes the contents to be indented and thus display off-center)


If you WANT it, define it.
theducks is offline   Reply With Quote
Reply

Tags
alignment, centering, div tags, img

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 04:59 AM.


MobileRead.com is a privately owned, operated and funded community.