How to align an image in the center? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How to align an image in the center?

10th Dec 2017, 12:30 PM
Amine Chahba
Amine Chahba - avatar
7 Answers
+ 8
use CSS img{ margin:auto; display:block;} or <div style="display:table-cell; vertical-align:middle; text-align:center"> <img src="img.png"> </div> https://www.sololearn.com/discuss/483962/?ref=app
10th Dec 2017, 12:40 PM
GAWEN STEASY
GAWEN STEASY - avatar
+ 3
2 simple ways <p><img src="URL" /></p> <center><img src="URL" /></center>
4th Jan 2018, 5:44 AM
💟💖💓Kavi💓💓💕💖
💟💖💓Kavi💓💓💕💖 - avatar
+ 2
Css code .centerr {margin:0 auto; width:500px; text-align:center; } <div class="centerr"><img src="img.jpg" Alt="image"/></div>
10th Dec 2017, 12:47 PM
SANDEEP SINGH RAWAT
SANDEEP SINGH RAWAT - avatar
+ 2
always use css for styling and layout issues so you can more easily maintain and restyle the web site later.
10th Dec 2017, 12:48 PM
Lisa F
Lisa F - avatar
+ 2
don't use inline styles as that makes your css hard to maintain and impossible to reuse
10th Dec 2017, 12:49 PM
Lisa F
Lisa F - avatar
+ 2
margin: 0 auto; centers a block element such as a <div> or <p> due to the left and right auto margins (provided width is set to less than 100%) but remember img is an inline element. so you have to align: center; on the img's container to make the image centered in the container.
10th Dec 2017, 12:54 PM
Lisa F
Lisa F - avatar
+ 2
don't fix the width of an image with pixels. Not all of your images will be that size and they will not be flexible. use CSS to make your images flexible too! img{ max-width:100%;}
10th Dec 2017, 1:08 PM
Lisa F
Lisa F - avatar