img | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

img

how we place an image at center,left or right

10th May 2017, 7:55 PM
Sainath Dodda
Sainath Dodda - avatar
3 Answers
+ 17
img { float: left } /* Left */ img { float: right } /* Right */ /* Center */ img { display: block; margin: 0 auto; } - Easiest way -
10th May 2017, 8:31 PM
Maz
Maz - avatar
+ 5
@Aaron Victor answer deserves clarification ^^ Use a class for the <img> container ( html parent element ) and define its alignement with the css 'text-align' property: <div class="imgBox"> <img src="image.url" alt="description"> </div> <style> .imgBox { text-align:right; } </style> The @Maz solution is also working, but alignement is not its first behaviour... The 'float' property is designed to define an element as "floating" one, meaning that it was extract of the normal content stream ( mainly text ), so the other inline type element will wrap the floating one, wich is placed at most left or right ( depending on the property value ): no centered alignement is possible by this way, and it could produce unexpected behaviour ( as container do no longer take account of a floating element size in auto-size computing ) :P https://www.w3schools.com/css/css_float.asp https://developer.mozilla.org/en-US/docs/Web/CSS/float
11th May 2017, 1:16 AM
visph
visph - avatar
+ 1
use a class and define it's position with align
10th May 2017, 8:32 PM
Aaron Victor
Aaron Victor - avatar