Centering images

[perkin5]

I want to center a 70px wide image inside a span tag which is the default 100% width. I gave the span a class and styled it as

text-align:center

and that looks fine when viewed as an epub. However when I convert it to a mobi format in Calibre and then view it in the 'Kindle for PC' reader, it is offset to the right.

Can anyone suggest what is going on?

[BetterRed]

Originally Posted by perkin5

I want to center a 70px wide image inside a span tag which is the default 100% width. I gave the span a class and styled it as

text-align:center

and that looks fine when viewed as an epub. However when I convert it to a mobi format in Calibre and then view it in the 'Kindle for PC' reader, it is offset to the right.

Can anyone suggest what is going on?

@perkin5 - mayhap K4PC is misleading you, have a read of this thread ==>> Help! Formatting Internal Images is making me crazy!

BR

[kovidgoyal]

Convert it to AZW3, not MOBI. MOBI is an obsolete format. If you do want it centered in MOBI you will need to put it in a <div> tag, not a <span> tag.

[dwig]

Originally Posted by perkin5

I want to center a 70px wide image inside a span tag ...

If you must use a <SPAN> do as Kovid instructs and use AZW3 instead of the old MOBI format.

If you must use the old MOBI then you need to place the image in <P> or <DIV> instead of a <SPAN>. If you do, it will center. The old MOBI is a good format, but is based on an earlier and simpler version of HTML and doesn't support many of the newfangled fancy HTML/CSS tricks.

[JSWolf]

A <span> tag is bad form even in an ePub or KF8. It may work in whatever software you are using to view it now, but eventually, you'll find some software that it won't work with. Go with the <p> or <div> as has been mentioned as that's proper form.

[Wendy Wolfe]

(Warning: I'm an ebook newbie)

I have centered images using the following. Is it bad ebook form?

CSS snippit:
.ImgCenter
{
text-align: center;
}

HTML:
<figure class="ImgCenter" >
<img alt="IMG" src="../your_image_file.jpg"/>
<br />
<figcaption><b>Fig I.II:</b> Description </figcaption>
</figure>

(I've also tweeked the margin attributes to attach the caption to the image, but that's a bit off-topic.)

[perkin5]

Originally Posted by kovidgoyal

Convert it to AZW3, not MOBI. MOBI is an obsolete format. If you do want it centered in MOBI you will need to put it in a <div> tag, not a <span> tag.

Many thanks for that good advice! I'll do as you say.

[perkin5]

Originally Posted by JSWolf

A <span> tag is bad form even in an ePub or KF8. It may work in whatever software you are using to view it now, but eventually, you'll find some software that it won't work with. Go with the <p> or <div> as has been mentioned as that's proper form.

OK got it - thanks!

[Wendy Wolfe]

(Folks can ignore my post... I've played around with centering & now understand the advantages of the <div>.)