How to center an image vertically ?

Question

Hello sololearners !
I found no way to center an image vertically and i would like to know if somebody here knows a way to do this.

Answer 1

Place the image into a button.

<button>
<img src="your-image">
</button>

Add css like this:

button {
outline:none;
display:block;
height:100vh;
background:transparent;
padding:0;
border:none;
}

img {
width:100vw;
height:50vh;
}

Answer 2

No bro..button is not created to store images. It is just a trick.

Answer 3

https://code.sololearn.com/WYIbdBo85KsT

Answer 4

you can create this class

.valign-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

and assign it to the wrapper, not to the image

-> from materializecss

try for example:

<div style="height: 100vh;" class="valign-wrapper">
<img src="" alt="">
</div>

Answer 5

this is the easier way: flexbox

Answer 6

it was an example 😑

Answer 7

yes because buttons were created to store images...sigh 😣😣😣

Answer 8

Try out something like this CSS snippet below:

img {
display: block;
margin-left: auto;
margin-right: auto;
}

Answer 9

Oh excuse me i did an error i meant vertically

Answer 10

There is not a easier way ?

Answer 11

But i can't choose a personalized height ? Or i'm obliged to choose 100vh

Answer 12

ok

Answer 13

Align it to the center just!!