vertically align image in center of div

leom

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

Pablod

Not 100%
But try this

{
 background-image: url(image-location);
 background-repeat: no-repeat;
 background-position: center;
}

Hope this helps

Liam Byrne

Officially

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

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)

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.

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.

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.