+ 6

How to center an image vertically ?

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.

14th May 2018, 10:59 AM
Valkyrion
Valkyrion - avatar
13 Respuestas
+ 6
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; }
14th May 2018, 11:46 AM
Adnan Zawad Toky
Adnan Zawad Toky - avatar
+ 6
No bro..button is not created to store images. It is just a trick.
14th May 2018, 11:54 AM
Adnan Zawad Toky
Adnan Zawad Toky - avatar
14th May 2018, 9:31 PM
Toni Isotalo
Toni Isotalo - avatar
+ 1
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>
14th May 2018, 11:17 AM
Andrea Simone Costa
Andrea Simone Costa - avatar
+ 1
this is the easier way: flexbox
14th May 2018, 11:25 AM
Andrea Simone Costa
Andrea Simone Costa - avatar
+ 1
it was an example 😑
14th May 2018, 11:32 AM
Andrea Simone Costa
Andrea Simone Costa - avatar
+ 1
yes because buttons were created to store images...sigh 😣😣😣
14th May 2018, 11:49 AM
Andrea Simone Costa
Andrea Simone Costa - avatar
0
Try out something like this CSS snippet below: img { display: block; margin-left: auto; margin-right: auto; }
14th May 2018, 11:09 AM
Lev
Lev - avatar
0
Oh excuse me i did an error i meant vertically
14th May 2018, 11:10 AM
Valkyrion
Valkyrion - avatar
0
There is not a easier way ?
14th May 2018, 11:24 AM
Valkyrion
Valkyrion - avatar
0
But i can't choose a personalized height ? Or i'm obliged to choose 100vh
14th May 2018, 11:28 AM
Valkyrion
Valkyrion - avatar
0
ok
14th May 2018, 11:32 AM
Valkyrion
Valkyrion - avatar
0
Align it to the center just!!
29th May 2018, 8:00 AM
Joy Rudra
Joy Rudra - avatar