+ 1
img
how we place an image at center,left or right
3 Antworten
+ 17
img { float: left } /* Left */
img { float: right } /* Right */
/* Center */
img { display: block; margin: 0 auto; }
- Easiest way -
+ 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
+ 1
use a class and define it's position with align