Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

vertically align image in center of div

Options
  • 17-01-2010 5:12pm
    #1
    leom
    Registered Users Posts: 112 ✭✭


    Folks,
    Any one has any idea, how can we make an image vertically centered in a div?
    Tagged:


Comments

  • Options
    #2
    Pablod
    Registered Users Posts: 489 ✭✭Pablod


    Not 100%
    But try this
    {
 background-image: url(image-location);
 background-repeat: no-repeat;
 background-position: center;
}

    Hope this helps


  • Options
    #3
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    Officially
    {
 background-image: url(image-location);
 background-repeat: no-repeat;
 background-position: 50% 50%;
}


  • Options
    #4
    Pablod
    Registered Users Posts: 489 ✭✭Pablod


    Liam Byrne wrote: »
    Officially
    {
 background-image: url(image-location);
 background-repeat: no-repeat;
 background-position: 50% 50%;
}

    Cheers Liam, still getting my own head around css.
    (self teaching is a *itch) ;)


  • Options
    #5
    leom
    Registered Users Posts: 112 ✭✭leom


    Folks,
    I need to use img tag. I do not want to use css for backgroud image in div.
    I need to have alt tag with image as well.


  • Options
    #6
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    leom wrote: »
    Folks,
    I need to use img tag. I do not want to use css for backgroud image in div.

    The only 3 ways to achieve this would be as follows:

    1) Server-side (e.g. PHP)

    - check the height of the image using getimagesize
    - subtract that from the height of the div, and divide the result by 2 to give a top margin for the IMG tag

    2) Javascript

    - Load the image with transparency 0
    - do roughly the same calculation after (img onload), and set the margin

    3) Put a single-cell table into the div and set vertical-align to center
    I need to have alt tag with image as well.

    Putting a title on the div should pretty much achieve this.


  • Advertisement
  • Options
    #7
    leom
    Registered Users Posts: 112 ✭✭leom


    thanks Liam
    Liam Byrne wrote: »
    leom wrote: »
    Folks,
    I need to use img tag. I do not want to use css for backgroud image in div.

    The only 3 ways to achieve this would be as follows:

    1) Server-side (e.g. PHP)

    - check the height of the image using getimagesize
    - subtract that from the height of the div, and divide the result by 2 to give a top margin for the IMG tag

    2) Javascript

    - Load the image with transparency 0
    - do roughly the same calculation after (img onload), and set the margin

    3) Put a single-cell table into the div and set vertical-align to center



    Putting a title on the div should pretty much achieve this.


Advertisement