Centering an ornament between paragraphs

[Psymon]

I must be a complete idiot! This seems like such a simple thing that I'm trying to do, and yet I can't seem to find a solution that WORKS, neither here in these forums nor anywhere else on the web.

I'm working on a rather long book, and in each chapter there's the occasional instance where there's some extra space inserted between paragraphs/sections. I thought it would be nice to toss a simple ornament/flourish in-between there (long horizontally, thin vertically). The image I'm using is relatively hi-res -- that is, not super-hi-res or anything, but it's big enough that if people felt so inclined, they could double-click on it and see the detail better -- and I've used it as a little flourish underneath all my chapter titles, too.

In this latter instance, under the chapter titles, it comes out looking fine, and you don't see anything funny going on -- but that's probably because the distance between the title/ornament and the ornament/first paragraph doesn't have to be symmetrical (and isn't meant to be).

When I insert it in-between two paragraphs, though, I can't seem to get it so that the image is nicely centered in-between paragraphs, i.e. that there's just as much space above the ornament as below. It'll look fine in Sigil, but when I view it on my iPad it ends up being too close to the lower paragraph, i.e. there's more of a margin above the image than there is below it.

I've tried all kinds of different things, and nothing seems to work! This seems so simple and basic, though -- surely there must be some ridiculously easy way to do this? :/

[Psymon]

If it matters, this is the image that I'm using as an ornament. Underneath my chapter titles I have it set to 62%, and wanted it to be 38% in-between paragraphs (i.e. in-between sections within a chapter, where originally there's some extra blank space) -- and in both cases centered, of course.

[theducks]

Originally Posted by Psymon

If it matters, this is the image that I'm using as an ornament. Underneath my chapter titles I have it set to 62%, and wanted it to be 38% in-between paragraphs (i.e. in-between sections within a chapter, where originally there's some extra blank space) -- and in both cases centered, of course.

IMHO don't try and scale it, just make 2 images (the file size should be small anyway) properly sized.

I see no reason a full scale image should cause visual balance issues.

[Psymon]

Originally Posted by theducks

IMHO don't try and scale it, just make 2 images (the file size should be small anyway) properly sized.

Well, how do you "properly size" something and have it be 38% of the screen width regardless of orientation (let alone screen resolution)?

[Psymon]

Heh, I figured it out! Before, while searching for an answer, I'd been using "center image epub" as my query (and here in these forums I just used "center image"), neither of which seemed to give me a solution that worked. A short while ago, though, I tried searching instead just for "center image css", and that led me to something that does work just perfectly!

I've only tried this out on my iPad so far, but what I ended up using was the following.

For my CSS I used...

img.ornament {
width: 38%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0.38em;
margin-bottom: 0.38em;
}

...and my image tag...

<p><img alt="Ornament" class="ornament" src="../Images/ornament-black.jpg" /></p>

I tried using "0" for my top/bottom margin, that that only seemed to end up giving me the same issue as before -- i.e. the top margin invariably ended up bigger than the bottom margin (and I have no idea why) -- but just bumping it up a bit seemed to do the trick.

I don't quite understand why this works and my earlier experiments didn't, but hey, it works! That's all that matters.

[odedta]

Don't use auto for margins

[Psymon]

Really? I have it in my style sheet in a couple of places, for example with centered paragraphs that I want to keep together as a block, or for tables, so that they'll center as well in the middle of the page "auto(matically)".

So what would one do in a case like that? The width of the thing in question varies from place to place, so it's not like I could just specify a particular percentage or something.

[Jellby]

Originally Posted by Psymon

Really? I have it in my style sheet in a couple of places, for example with centered paragraphs that I want to keep together as a block, or for tables, so that they'll center as well in the middle of the page "auto(matically)".

Most readers (all with Adobe engine, although it seems the latest incarnation behaves differently) just replace "auto" with "0", and this is an allowed behaviour according to specs. So just don't rely on "auto" being supported.

So what would one do in a case like that? The width of the thing in question varies from place to place, so it's not like I could just specify a particular percentage or something.

Simple. Wrap your image in a <div> and center it:

<div class="ornament"><img alt="" src="../Images/ornament-black.jpg" /></div>

div.ornament {
text-align: center;
margin-top: 0.38em;
margin-bottom: 0.38em;
}
div.ornament img {
width: 38%;
}

PS. Don't use alt="Ornament", the alt text is supposed to be a replacement for the image (in text-to-speech, for example), and I don't think you want your image replaced with "ornament". For purely decorative images, such as this one, it's perfectly OK, and recommended, to just have an empty alt.

[Psymon]

Interesting -- thanks! I changed all those ornaments.

And what about the aforementioned tables, then? Wrap all those in a "text-align: center" div, too, basically? Will that keep the width of the table to a minimum (assuming it's not so "full" with stuff that it stretches to the width of the margins, of course)? I know I can try this out myself and see, but my inability to see what happens on other devices that I can't do, of course.

[Psymon]

Originally Posted by Jellby

Simple. Wrap your image in a <div> and center it:

<div class="ornament"><img alt="" src="../Images/ornament-black.jpg" /></div>

div.ornament {
text-align: center;
margin-top: 0.38em;
margin-bottom: 0.38em;
}
div.ornament img {
width: 38%;
}

Y'know what? That doesn't work on the iPad. It looks right in Sigil, but when I view it on the iPad the image stretches to 100% (width of the page, and proportionally for the height). :/

[JSWolf]

Originally Posted by Jellby

Most readers (all with Adobe engine, although it seems the latest incarnation behaves differently) just replace "auto" with "0", and this is an allowed behaviour according to specs. So just don't rely on "auto" being supported.



Simple. Wrap your image in a <div> and center it:

<div class="ornament"><img alt="" src="../Images/ornament-black.jpg" /></div>

div.ornament {
text-align: center;
margin-top: 0.38em;
margin-bottom: 0.38em;
}
div.ornament img {
width: 38%;
}

PS. Don't use alt="Ornament", the alt text is supposed to be a replacement for the image (in text-to-speech, for example), and I don't think you want your image replaced with "ornament". For purely decorative images, such as this one, it's perfectly OK, and recommended, to just have an empty alt.

alt="section break" would be best as that does describe exactly what's going on.

[JSWolf]

Originally Posted by Psymon

Y'know what? That doesn't work on the iPad. It looks right in Sigil, but when I view it on the iPad the image stretches to 100% (width of the page, and proportionally for the height). :/

AAARRGGHH!!! Please STOP using iPad as a generic term for whatever app you use to read with. The iPad is the device and the app is what you want to mention. You could be using iBooks, Bluefire, Montano (sp?), Marvin, and others.

[Psymon]

Originally Posted by JSWolf

AAARRGGHH!!! Please STOP using iPad as a generic term for whatever app you use to read with. The iPad is the device and the app is what you want to mention. You could be using iBooks, Bluefire, Montano (sp?), Marvin, and others.

Oops, sorry! I did mean iBooks -- I keep forgetting that there's other ebook apps for the iPad (which I tried out ages ago, but trashed).

What's the emoticon for "D'oh"?

[Hitch]

Originally Posted by Psymon

Y'know what? That doesn't work on the iPad. It looks right in Sigil, but when I view it on the iPad the image stretches to 100% (width of the page, and proportionally for the height). :/

No offense:

Are you sure you coded the HTML correctly? In iBooks, which is hinky, you can't really reliably center things without ensuring that they are encased in "something else," even if it's as useless as an empty span. Can you drop your HTML in here?

Hitch

[Psymon]

Originally Posted by Hitch

Can you drop your HTML in here?

I already did -- see above! First I posted my solution which DOES work just fine in iBooks, but then I was told to do it a different way because apparently I shouldn't do it the way I did...

...so now I don't know what to do. :/