How to align this rollover image with the center of the page?

Question

Why won't this rollover image align to the center of the page?
I've tried all ways of aligning it that I could think of, but none works.

<img src="IMG1" align="middle" 
     onmouseover="this.src='IMG2'"
     onmouseout="this.src='IMG1'" width="1008" height="175"/>

I can't get it to center horizontally in the middle of the page.

Possible duplicate of [How to vertically align an image inside a div?](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) — Martin, Nov 20 '17 at 09:00

score 1 · Answer 1 · edited Nov 20 '17 at 09:19

You probably want to wrap your image in a <div> set to display flex (I wouldn't set <body> to flex).

Flex box will let you place the image in the middle of your <div> very quickly! If you want your container it to take the screen full height simply set your <div> wrapper to 100vh.

Also notice that you shouldn't put your sizes after the forward slash.

<div class="container">
    <img src="img1" onmouseover="this.src='img2'" onmouseout="this.src='img1'"/>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items:center;
  height: 100vh;
}

img {
  height: 200px;
}

<div class="container">
  <img src="https://i.stack.imgur.com/dusjG.png"
       onmouseover="this.src='https://i.stack.imgur.com/0RSNI.jpg'"
       onmouseout="this.src='https://i.stack.imgur.com/dusjG.png'"/>
</div>

How to align this rollover image with the center of the page?

1 Answers1