Image alignment within a div

[bambiv]

Hi. I'm just learning html and css. My project is formatting an ebook, and it's looking pretty good so far. My challenge is in aligning the images. I have them each (60 images throughout the book) in a div which includes the caption. I'm trying to get them to align center. They're not all the same width, but none is over 550 px and 300 dpi. My wish is to have each caption also align center, and no wider than its image. Is this possible? I'm having tremendous problems!

Does it matter in what order I place the declarations within the stylesheet?

Here's the CSS I have so far (which isn't working!). I know I'm pasting in too much, but maybe something is conflicting with the pertinent parts.

html {
margin: 0;
padding: 0;
}
body {
font: 95% georgia, palatino, serif !important;
line-height: 1.8 !important;
color: #000;
margin: 1.5em;
padding: 0;
text-indent: 1.2em;
margin-bottom: 0em;
}
p {
text-indent: 1em;
text-align: left !important;
margin-bottom: 0em;
orphans: 2;
widows: 2;
}
p.contents {
text-indent: 0em;
margin-top: .7em;
}
p.chapter {
text-indent: 0em;
font-weight: bold;
font-size: 1.5em;
page-break-before: always;
margin-top: 3em;
margin-bottom:3.5em;
text-align: center !important;
}
/*to force a pagebreak*/
p.newpage {
page-break-before: always !important;
text-indent: 0em;
}
p.firstpara {
text-indent: 0em;
}
p.firstpara:first-letter {
font-family: "georgia";
font-weight: bold;
float:left;
font-size: 200%;
margin-top: -.1em;
margin-right: .1em;
}
p.firstpara:first-line
font-variant: small-caps;
}
span.chapnum {
font-size: 1em;
font-weight: regular;
margin-bottom:.5em;
}
p.subhead {
font-size: 1.5em;
font-style: italic;
text-indent: 0em;
margin-top: .5em;
margin-bottom: .1em;
}
p.subsubhead {
font-size: 1.3em;
text-indent: 0em;
margin-top: .3em;
}
p.minihead {
font-size: 1.2em;
text-indent: 0em;
text-decoration: underline;
margin-top: 0em;
}
p.sidebarmark {
font-size: 1em;
text-indent: 0em;
font-weight: regular;
font-style: italic;
margin-top: 0em;
margin-bottom: -1em;
}
p.sidebarmarkend {
font-size: .8em;
text-indent: 0em;
font-weight: regular;
font-style: italic;
margin-top: .3em;
margin-bottom: .7em;
}
p.rightalign {
text-align: right !important;
}
p.glossary {
}
/*Differentiate sidebars*/
#sidebar {
color: #632c09;
font-family: TrebuchetMS, sans-serif !important;
border-top: 1px dashed red;
border-bottom: 1px dashed red;
margin-top: 3em;
margin-bottom: 3em;
}
div.pic {
display: inline-block !important;
margin-top: 2em;
margin-bottom: 1.5em;
}
img {
image-align: center !important;
margin-bottom: .1em !important;
}
p.caption {
font-style: italic;
text-align: center !important;
text-indent: 0em;
font-size: smaller;
font-color: black;
margin-left: 5%;
margin-right: 5%;
}
div.keep {
display: inline-block !important;
}
blockquote {
margin-top: 1em;
margin-right: 5em;
margin-bottom: 1em;
margin-left: 4em;
line-height: 1.6em !important;
font-style: italic;
}
/*To eliminate first line indent after image*/
div + p {
text-indent: 0em !important;
}
blockquote + p {
text-indent: 0em !important;
}
/*For resources at the end of book*/
p.info {
text-indent: 0;
margin-bottom: 1em;
}
ul {
list-style-position: outside;
text-indent: -.5em;
margin-left: 1em;
}

Any suggestions or advice would be very much appreciated!

[resdog]

can you paste or provide the HTML so we know what is being applied where?

Also, you shouldn't have a 300dpi image for an html page, as it's just a big file that doesn't need to be there.

[bambiv]

Thanks resdog.

I too thought 300 dpi was large, but I read (somewhere) that that's desirable for ebooks. I will research further.

Each image is in a div like this:


</p>
<div class="pic">
<p><img src="a.luciano.jpg" alt="luciano on tram" /></p>
<p class="caption">At work on the tram: Luciano (top) and his three partners. Victim&rsquo;s cap is visible at lower left.</p>
</div>