Help with centering DIV and IMG

[rhino79]

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]

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.

[Toxaris]

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.

[DiapDealer]

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?

[rhino79]

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.

[GrannyGrump]

@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:

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)

[rhino79]

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!

[Turtle91]

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?

[theducks]

Originally Posted by grannyGrumpy

@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:

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.