Question

I have a div with image “image.jpg”.

By using text-align=center, the image is being centered horizontally.

However it’s not vertically aligned. How would I implement the vertical alignment?

<div style="vertical-align: middle;text-align:center;">
    <img title="Title3" src="image.jpg" style="display: inline;" id="idImage">
</div>

Answer 1

If you set the height of the parent container and set your margin-top: auto, it should align to the middle I think. This works with horizontally aligning, but I haven’t tried with vertical. Anyways, it would avoid absolute positioning

As mentioned before, you can also use javascript to find the height, then set the margin, something like this:

var image = document.getElementById("myImage");
var imgHeight = image.style.height;
image.style.marginTop = -(imgHeight/2);
image.style.top = 50%; //you can probably just set this in css and omit this line

you must of course set

#myImage{
  position: absolute;
}

though