Centering Images using object styles

[SamL]

So I am using images for my chapter headings for my book. To make sure they will display alright across different platforms, I've made the width 500px. Because of this, the image does not take up the whole width on some platforms like the iPad.

I need to center all of these images. What I was doing before was going in to all the XHTML files and putting in <div align="center"> tags. This displayed the images exactly how I want them.

I noticed that once I tried to validate my epub, there were errors in the use of my align tags.

Upon further reading, it looks like I need to apply object styles to my images in inDesign, that does this alignment. I am able to apply the object style, but when I look at my CSS file, it recognizes the style, but has no attributes to it (I read this is a common problem.)

so in my CSS file, it looks like this:

div.center-image {
}

And in the XHTML file, is applies the style to the images correctly.

Can anyone recommend what I should put in for code for this CSS, I've tried a few different things, but I haven't really used object styles until now. Any help would be greatly appreciated.

Thanks

[Adjust]

div.center-image	{
	margin-top: 0%;
	text-indent: 0%;
	text-align: center;
	margin-bottom:0%;
		}
img {
	max-width: 100%
}

[SamL]

Hmmmm, still not working. It is still aligning left.

This is what my code looks like.

CSS:

div.center-image {
margin-top: 0%;
text-indent: 0%;
text-align: center;
margin-bottom:0%;
}
img {
max-width: 100%
}

From the XHTML file:

<p><span class="center-image"><img class="center-image" src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" /></span></p>

Both the span and img class were generated from my object style in InDesign. I also tested this with the code:

<p><div align="center"><img class="center-image" src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" /></div></p>

and it displays exactly how I want it, but it won't validate. I am testing this in Digital Editions.

[Jellby]

If you define the style for div.center-image, it's pointless to use <span class="center-image">, or to add a "center-image" class to anything other than a <div>. Moreover, a <span> does not use a text-align property. And you can't have block-level elements (like <div>) inside a <p>.

Try this:

<div align="center-image">
<img src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" />
</div>

(And don't use arbitrary text for the "alt" attribute. It is intended to be used when the image cannot be displayed, for example when a text-to-speech system is being used. If the image is purely decorative, you can have alt="", otherwise use at least something descriptive of what appears in the image.)

[theducks]

Originally Posted by Jellby

Try this:

<div align="center-image">
<img src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" />
</div>

(And don't use arbitrary text for the "alt" attribute. It is intended to be used when the image cannot be displayed, for example when a text-to-speech system is being used. If the image is purely decorative, you can have alt="", otherwise use at least something descriptive of what appears in the image.)

TTS will have trouble pronouncing 'jpg' (Jay' Peg).

I prefer to use: Image or Picture or Map as a suffix rather than a file extension (that some users may not even know is a image file type)

[SamL]

Originally Posted by Jellby

If you define the style for div.center-image, it's pointless to use <span class="center-image">, or to add a "center-image" class to anything other than a <div>. Moreover, a <span> does not use a text-align property. And you can't have block-level elements (like <div>) inside a <p>.

Try this:

<div align="center-image">
<img src="images/Stern_title_fmt.jpeg" alt="Stern_title.jpg" />
</div>

(And don't use arbitrary text for the "alt" attribute. It is intended to be used when the image cannot be displayed, for example when a text-to-speech system is being used. If the image is purely decorative, you can have alt="", otherwise use at least something descriptive of what appears in the image.)

I was using the <div align="center"> before, but when I go to validate the epub, I get the error:

ERROR: Stern Folder.epub/OEBPS/Stern.xhtml(14): attribute "align" not allowed here; expected attribute "class", "dir", "id", "style", "title" or "xml:lang"

So thats why I am trying to find another way to center the image.

Thanks for the help so far everyone!

[Jellby]

Originally Posted by SamL

I was using the <div align="center"> before, but when I go to validate the epub, I get the error:

Sorry, my fault. It's not align, but class, try <div class="center-image">

[SamL]

Ok I got it to work. I needed to use a <p> class instead of a div. I used:

<p class="center-image"><img src="images/Stern_title_fmt.jpeg" alt="Stern" /></p>

Thank for letting me know about the alt tags too, I didn't think too much about how they are used in this format.