Centering image in Firefox

  • Resolved cableghost

    (@cableghost)


    15 years, 9 months ago

    Okay, I’ve read several forum posts and google-searched articles, but nothing works for me; I cannot get pictures (or even tables) to center when viewed in FF…they appear on the left margin. Although the pic is center in the editor and they appear center in IE, FF will not display them centered.

    I have tried creating CSS div code to center the image, I’ve tried adding the img: aligncenter CSS code…nothing works.

    Is there 1 trick that will work for certain?

    -Scott

Viewing 7 replies - 1 through 7 (of 7 total)

  • Has the site been validated? Invalid markup can cause these kinds of problems.

    Thread Starter cableghost

    (@cableghost)

    There’s a few errors I noticed during validation that I’ll work on.

    I did discover though if I use…
    <p align=center>

    This works, but the built-in centering of my TinyMCE-advanced editor does not.

    -Scott

    <p style="text-align:center"> would be better but, in theory, that’s what TinyMCE would be inserting.

    Thread Starter cableghost

    (@cableghost)

    Discovered the issue.

    The built-in WP editor’s version of center was/is the problem. If I use the TinyMCE center tag, then it works.

    Thank you.

    I am having the same problem with images centering in IE but not in Firefox, so I have not yet started the topic yet again.

    But I am not using an independent HTML editor (like Tiny MCE), but rather WP’s own.

    I’ve found so many different suggestions for solutions tha I am quite confused now.

    My code for one of the offending images is:

    <p style="text-align:center"><img class="size-full wp-image-1033 aligncenter" src="https://www.carolineschelling.com/wp-content/uploads/2009/08/Caroline-Briefe.bmp" alt="Caroline Briefe" /></p>

    on this page

    http//www.carolineschelling.com/index-of-letters

    My WP-generated centering coding

    <p style="text-align:center">

    is the same as esmi’s suggestion above but different from cableghost’s
    <p align=center>

    which I tried but still does not center the image in Firefox.

    A search turned up the following explanation:

    “To centre a block you are supposed to set margin-left and margin-right to auto, but IE doesn’t honour this, so you have to use
    text-align:center to make IE happy, plus margin-left:auto;
    margin-right:auto for the standards compliant browsers.”

    Is that what cableghost was talking about when he said

    The built-in WP editor’s version of center was/is the problem.

    ?

    In any event, I still have no solution. I would prefer a global solution (on my theme’s CSS Style Sheet? I’m using the Painter theme). Is a global solution possible?

    But where and how would one enter such code, e.g.,

    margin-right:auto;
    margin-left:auto;

    Thank you.

    @kosis: This topic has been marked as resolved. Please post a new topic.

    Thanks, esmi, I will do so now.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Centering image in Firefox’ is closed to new replies.