Image centering

Discussion in 'HTML' started by Samuël van Laere, Dec 5, 2004.

  1. Good afterneun,

    I use some inline styling on a image and its paragraf tag:
    <p style="text-align: center; margin: 1em">
    <img style="text-align: center; margin: 1em" src="jesouk.jpg" width="500"
    height="346" alt="Some alt text">
    </p>

    Now this centers the image on IE, FF, MZ, NS and OP
    Though i'm not sure if both the paragraf and image tags need to be styled.
    Anyhow, I figured that it would be better to make a class and call it like
    this:

    <p class="centered">
    <img class="centered" src="http://www.oukje.nl/afbeeldingen/jesouk.jpg"
    width="500" height="346" alt="
    Foto van geleidehond Oukje in functie met haar vrouwtje Jessica"></p>

    This being the class:
    ..centered { margin: 1em; text-align: center; }

    But nope it won't center the image when done like that.
    Is there anything missing that causes the image not to center?
    Same stylerules inline do work, confusing to say the least.

    Sure i've got a URL, but it only shows the inline style in action.


    Regards,
    Samuël van Laere
    the Netherlands
     
    Samuël van Laere, Dec 5, 2004
    #1
    1. Advertising

  2. Samuël van Laere

    Peter Guest

    Samuël van Laere wrote:

    >Good afterneun,
    >
    >I use some inline styling on a image and its paragraf tag:
    > <p style="text-align: center; margin: 1em">
    ><img style="text-align: center; margin: 1em" src="jesouk.jpg" width="500"
    >height="346" alt="Some alt text">
    ></p>
    >
    >Now this centers the image on IE, FF, MZ, NS and OP
    >Though i'm not sure if both the paragraf and image tags need to be styled.
    >Anyhow, I figured that it would be better to make a class and call it like
    >this:
    >
    ><p class="centered">
    ><img class="centered" src="http://www.oukje.nl/afbeeldingen/jesouk.jpg"
    >width="500" height="346" alt="
    >Foto van geleidehond Oukje in functie met haar vrouwtje Jessica"></p>
    >
    >This being the class:
    >.centered { margin: 1em; text-align: center; }
    >
    >But nope it won't center the image when done like that.
    >Is there anything missing that causes the image not to center?
    >Same stylerules inline do work, confusing to say the least.
    >
    >Sure i've got a URL, but it only shows the inline style in action.
    >
    >
    >Regards,
    >Samuël van Laere
    >the Netherlands
    >
    >
    >
    >

    I changed this:
    <div align="center"><img
    src="http://www.oukje.nl/afbeeldingen/jesouk.jpg" width="500"
    height="346" alt="
    Foto van geleidehond Oukje in functie met haar vrouwtje Jessica"></div>

    Centers perfectly
    Peter
     
    Peter, Dec 5, 2004
    #2
    1. Advertising

  3. "Peter" <> wrote in message
    news:41b32bc0$0$45966$...
    >
    > I changed this:
    > <div align="center"><img
    > src="http://www.oukje.nl/afbeeldingen/jesouk.jpg" width="500"
    > height="346" alt="
    > Foto van geleidehond Oukje in functie met haar vrouwtje Jessica"></div>
    >
    >


    Thanks Peter.
    To bad it requires a div though, but its probally allright to use it for
    images.

    Regards,
    Samuël
     
    Samuël van Laere, Dec 5, 2004
    #3
  4. Samuël van Laere wrote:

    > I use some inline styling on a image and its paragraf tag:
    > <p style="text-align: center; margin: 1em">
    > <img style="text-align: center; margin: 1em" src="jesouk.jpg" width="500"
    > height="346" alt="Some alt text">
    > </p>


    The text-align property on the img is pointless. Text align applies to block
    elements and centres the inline content of that block. Images are inline.

    > Anyhow, I figured that it would be better to make a class and call it like
    > this:
    >
    > <p class="centered">
    > <img class="centered" src="http://www.oukje.nl/afbeeldingen/jesouk.jpg"
    > width="500" height="346" alt="
    > Foto van geleidehond Oukje in functie met haar vrouwtje Jessica"></p>
    >
    > This being the class:
    > .centered { margin: 1em; text-align: center; }


    That isn't a class. "centered" is a class. That is a style using a class
    selector.

    > But nope it won't center the image when done like that.


    It should do. The reason it doesn't is most likely due to code you aren't
    showing us. Try providing a URL in future. Code fragments can make it
    easier to find the relevant portion, but are not always enough on their
    own.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Dec 5, 2004
    #4
  5. Peter wrote:


    > <div align="center">


    Deprecated; should not be used.


    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Dec 5, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jerry Camel

    Centering an image with text

    Jerry Camel, Sep 23, 2005, in forum: ASP .Net
    Replies:
    6
    Views:
    546
    John Timney \(ASP.NET MVP\)
    Sep 23, 2005
  2. Richard

    Re: Centering image on page?

    Richard, Jun 25, 2003, in forum: HTML
    Replies:
    0
    Views:
    3,787
    Richard
    Jun 25, 2003
  3. Jerry Muelver

    Re: Centering image on page?

    Jerry Muelver, Jun 25, 2003, in forum: HTML
    Replies:
    0
    Views:
    849
    Jerry Muelver
    Jun 25, 2003
  4. mr_vocab
    Replies:
    4
    Views:
    721
    mr_vocab
    May 24, 2004
  5. Steve Greenaway

    Something about image centering

    Steve Greenaway, Dec 5, 2004, in forum: HTML
    Replies:
    3
    Views:
    419
    David Dorward
    Dec 5, 2004
Loading...

Share This Page