How to get the image in centre in HTML | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How to get the image in centre in HTML

important

19th Feb 2017, 3:22 PM
vansh
vansh - avatar
4 Answers
+ 3
An <img> element is already of inline-level type... so to center it, you just need to apply 'text-align:center;' to it container/parent ^^ The solution of <center> is to avoid, as this element is deprecated. If you need to introduce a container for your image, use a <div>, and apply to it the correct/expected behavior... ( use <span> as a generic container of inline block type, as opposite )
19th Feb 2017, 8:57 PM
visph
visph - avatar
+ 1
easiest way to achieve this is: <center> </center>
20th Feb 2017, 3:50 AM
Aquarius
Aquarius - avatar
0
you could wrap it in <center></center> tags... but dont. kinda sketchy. make a class called centerImg or something. then for that img apply it <img herf.... class="centerImg".. then in your styles write .centerImg { display:block; margin-left:auto; margin-right:auto; } that should do the trick. you might also need to add margin: 0 auto; but im not 100%. hope this helps!!
19th Feb 2017, 3:56 PM
Michael Szczepanski
Michael Szczepanski - avatar
0
using css, write class for img .img-center { display: inline-block; margin-left: auto; margin-right: auto; } or just display inline-block but wrap image in div .img-wrapper { text-align: center; } <div class="img-wrapper"> <img src="..."> </div>
19th Feb 2017, 8:04 PM
Azh Setiawan
Azh Setiawan - avatar