View Full Version : Center a div


marcelo2605
05-12-2011, 02:35 PM
Is possible center a div without using text-align?

I have a page with one big image and a small text, like a caption, and I would center both, but the text still align left.

In websites is commom use margin-left/right:auto and div align: center. But this look like doesn't work in epub.

Faster
05-12-2011, 07:43 PM
Misunderstood. Reply removed.

Jellby
05-13-2011, 05:32 AM
I have a page with one big image and a small text, like a caption, and I would center both, but the text still align left.

What do you mean the text is "centered, but still aligned left"? I'm guessing you want a left-aligned text block, but that does not take the full page width, having equal right and left margins. something like this:

---------------------------
| XXXXX |
| |
| Fig1. caption |
| text. |
| |
| Normal text paragraph |
| with full justification |
| etc. |
---------------------------

In that case, you have to either set an explicit width for the text block and "auto" margins (which do not work in some readers), or set the margins explicitly, i.e.:

<div class="illustration">
<img src="image.jpg" alt="" />
<p class="caption">Fig. 1: Caption text.</p>
</div>

div.illustration {
text-align: center; /* this centers the image */
}
p.caption {
text-align: left; /* this keeps the caption left-aligned */
/* to center the caption block, use */
/* either these two lines: */
width: 60%;
margin: 0 auto;
/* or just this one: */
margin: 0 20%;
}

marcelo2605
05-13-2011, 07:57 AM
Thanks Jellby. I think it will help.

marcelo2605
05-13-2011, 08:39 AM
The second way (margin: 0 20%;)

works better in ADE and Calibre.