I need some help about vertical alignment of a picture only.

There is vertical-align in css but it vertically aligns an image according to text.

I only want to vertically align an image inside a div.

I have searched a lot but no useful information was found.

So please help me.

Just do this:

 

img.center {
 margin:0 auto;
}

<img class="center" sr="image.png" alt="image" />

img.center {
 margin:0 auto;
}

<img class="center" sr="image.png" alt="image" />

 

The will align it horizontally Traxor. It should be:

 

img.center {
 margin:auto 0;
}

<img class="center" sr="image.png" alt="image" />

Do you need to define a set height to use auto on the vertical axis?

 

Another alternative, although not a great solution would be to do something like this

 

img.center{
position:relative;
top:50%;
margin-top: -123px /* insert a number that is half the height of the image */
}

 

that would allow for a variable height, although you may be able to use auto in conjucntion with a variable height, i just don't know

 

That seems to work in most browsers, but of course not Internet Explorer. So, we add an equal amount of font-size and use a filter to reset non-Internet Explorer browsers:

 

 

great trick! i've never actually seen that ie 'hack' before but i'll certainly find use for it. thanks :-)