kindlegen - center image using CSS only?

[mjwilson]

Wondering if kindlegen can center an image, using CSS only (no <center> in the HTML), for both Mobi and KF8 formats.

What I'm trying to do is create a single HTML page working for desktop and mobile browsers, and, via kindlegen, for Mobi and KF8, without any hacks. I have images which will be floated-right on larger displays, and centered on smaller ones, so I want to do the positioning in CSS only, and target different devices using Media Queries.

For the centered image I have

display: block; margin-left: auto; margin-right: auto;

which is the normal way to do it, I believe.

In the Kindle previewer (which I assume will work the same as kindlegen), this works fine for Kindle Fire/Kindle Touch devices, but for the standard Kindle it doesn't work, the image is just on the left margin.

Any ideas?

[DiapDealer]

p.image_container {
    text-indent: 0;
    text-align: center;
    }

<p class="image_container"><img src="../Images/blahblah.jpg" /></p>

[Jellby]

Note that there's no CSS in MOBI at all. You can use CSS in your source file, but it will be converted to <center> or whatever by kindlegen.

[mjwilson]

Originally Posted by DiapDealer

p.image_container {
    text-indent: 0;
    text-align: center;
    }

<p class="image_container"><img src="../Images/blahblah.jpg" /></p>

Thanks!

Originally Posted by Jellby

Note that there's no CSS in MOBI at all. You can use CSS in your source file, but it will be converted to <center> or whatever by kindlegen.

Cheers. I'm not too worried about what the MOBI looks like internally, just whether I can really write source HTML which works in all cases.

[Oldpilot]

My images and captions are centered thus:

div.img { text-align:center; }
div.text { text-align:center; font-style:italic; }

I used to use small also, for the caption, but the results seemed uneven so I gave it up.