Centering Images

[Doctor T]

Hi!

Is there a problem if I use ...

<p class="center"><img src="../Images/Tbl_1_1.jpg" /></p>

... for centering images?

FYI, i use ...

p.center {text-align: center;}

... in the style sheet.

Thank you!

Dr. T

[DiapDealer]

No problem that I know of. That's typically how I go about it. Might want to make sure your img tag has an "alt" attribute, though.

[Grizella]

The alt attribute is mandantory. If there is textual replacement for the image, leave it empty (alt="")

[theducks]

is there a plain:

p { <style stuff>; }

somewhere in your CSS

Your p.center class may need to be AFTER that in the sheet.

is it possible that there are 2 p.centers defined?

[Toxaris]

Also, if you have in your plain p selector text-indent, then you must also set in your center class the text-indent to zero.

[RbnJrg]

Originally Posted by Doctor T

Hi!

Is there a problem if I use ...

<p class="center"><img src="../Images/Tbl_1_1.jpg" /></p>

... for centering images?

FYI, i use ...

p.center {text-align: center;}

... in the style sheet.

Thank you!

Dr. T

That won't work because the property "text-align: center;" only works for inline elements and an image is a block element. So you have two ways to center horizontally an image:

1. To use:

.center {
     width: X%; /* Where X is the width you wish */
     margin-left: auto;
     margin-right: auto;
}

And in the .xhtml file:

<p class="center"><img alt="" src="../Images/Tbl_1_1.jpg" /></p>

Note: now "margin-left: auto" and "margin-right: auto" work in ADE 4.0 (for that reason I'm using them).

2. To use:

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

.inlined {
     display: inline;
}

And in the .xhtml file:

<p class="center"><img class="inlined" alt="" src="../Images/Tbl_1_1.jpg" /></p>

Both methods will center your image.

Regards
Rubén

[Paulie_D]

Originally Posted by RbnJrg

That won't work because the property "text-align: center;" only works for inline elements and an image is a block element.

Actually, images are inline by default

http://www.impressivewebs.com/defaul...html-elements/

[DiapDealer]

Originally Posted by RbnJrg

That won't work because the property "text-align: center;" only works for inline elements and an image is a block element. So you have two ways to center horizontally an image:

1. To use:

.center {
     width: X%; /* Where X is the width you wish */
     margin-left: auto;
     margin-right: auto;
}

And in the .xhtml file:

<p class="center"><img alt="" src="../Images/Tbl_1_1.jpg" /></p>

Note: now "margin-left: auto" and "margin-right: auto" work in ADE 4.0 (for that reason I'm using them).

2. To use:

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

.inlined {
     display: inline;
}

And in the .xhtml file:

<p class="center"><img class="inlined" alt="" src="../Images/Tbl_1_1.jpg" /></p>

Both methods will center your image.

Regards
Rubén

I've never had the slightest problem horizontally centering an image the way the OP described: by setting "text-align: center" on the (block element) p tag the encapsulates the image. Never had to inline the img element using css.

[JSWolf]

And this thread belongs in the Sigil forum and not the ePub forum because?

[theducks]

Originally Posted by JSWolf

And this thread belongs in the Sigil forum and not the ePub forum because?

• The OP was viewing a book in Sigil
• The OP was editing/creating a book in Sigil

Modern usage is:

It is the Messengers fault

[RbnJrg]

Originally Posted by DiapDealer

I've never had the slightest problem horizontally centering an image the way the OP described: by setting "text-align: center" on the (block element) p tag the encapsulates the image. Never had to inline the img element using css.

Read this thread (and my posts there ):

https://www.mobileread.com/forums/sho...d.php?t=247587

[DiapDealer]

So when you said; "that won't work," you really meant; "that may not work with certain buggy rendering software"?

[RbnJrg]

Originally Posted by DiapDealer

So when you said; "that won't work," you really meant; "that may not work with certain buggy rendering software"?

Hmmm, yes

[Hitch]

Originally Posted by DiapDealer

So when you said; "that won't work," you really meant; "that may not work with certain buggy rendering software"?

Diap:

Might be nitpicky, admittedly, BUT, for those of us stuck with covering all those bases, Ruben is correct. ;-) Juzzzzz sayin'.

Hitch

[DiapDealer]

Originally Posted by Hitch

Diap:

Might be nitpicky, admittedly, BUT, for those of us stuck with covering all those bases, Ruben is correct. ;-) Juzzzzz sayin'.

Hitch

Oh, I don't disagree (and I appreciate the knowledge). I just thought something along the lines of; "that might give you problems on iBooks," would have been more appropriate than; "that won't work." 'Cause let's face it ... it will work a great, big chunk of the time.

Ruben's post led me to believe there was something inherently wrong with the code, is all. And I don't believe there is. The text-align css was properly being applied to the block e!ement 'p' (whose text will display inline). The img tag, as a block-level element that's displayed inline should be centered horizontally by any competent browser/epub renderer out there. But if one has to ensure that things display properly on the widest range of devices out there, then by all means... point out the aberant systems, and the special requirements to make them to behave properly.