Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertically align an image

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #39720
    Kosler
    Member

    I have this: http://jsfiddle.net/8X3a8/
    And I want the easiest and / or best way to align the image vertically !? :-?

    #109478
    TheDoc
    Member

    If you know the height and width of the image, you can do this: http://jsfiddle.net/8X3a8/1/

    #109490
    Kosler
    Member

    Thanks a lot!

    #109643
    Kosler
    Member

    Excuse me …

    Another little problem …

    How do I know how to change those percentages or pixels at the “margin-top ‘or’ margin-left ‘, depending on the size of the image?

    To an image of 169 x 169, how should I change those values ​​or values ​​have changed?

    Or how is it?

    Can you explain me little or if I have an example that would be great

    Thank you in advance

    #109646
    chrisburton
    Participant

    @TheDoc’s code should work for those values also.

    #109647
    Kosler
    Member

    @ChristopherBurton

    But it does not work …

    I changed the size to 30 px bigger and look … http://jsfiddle.net/8X3a8/2/

    #109649
    chrisburton
    Participant

    The margins would reflect half the height and width.

    http://jsfiddle.net/8X3a8/4/

    #109650
    Senff
    Participant

    You’ll have to change the top margin and left margin of the image too, with the value that is negative the half of it.

    So if your image is 130×130, you’ll need a top margin of -65px and left margin of -65px.
    If your image is 200×150, you’ll need to top margin of -100px and left margin of -75px.
    Etc.

    #109651
    Kosler
    Member

    @ChristopherBurton
    Now I understand.

    Thanks a lot!

    #109652
    Kosler
    Member

    Does not work on the “edit”

    @ Senff
    This is the point. Thank you!

    #109696
    sachinn
    Member

    Hi Kosler,

    Refer the below code :

    Foto

    /* Css */
    .align_img {width: 200px; height: 200px; text-align: center;}
    .foto_cerc_stanga { margin: 0 auto; }

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.