# Centering a floated image within a div

**URL:** <https://forum.freecodecamp.org/t/centering-a-floated-image-within-a-div/80745>\
**Category:** General\
**Created:** [January 26, 2017, 8:57am UTC](https://forum.freecodecamp.org/t/centering-a-floated-image-within-a-div/80745 "2017-01-26T08:57:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![xNavid](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/xnavid/32/30241_2.png) [@xNavid](https://forum.freecodecamp.org/u/xNavid)\
**Post date:** [January 26, 2017, 8:57am UTC](https://forum.freecodecamp.org/t/centering-a-floated-image-within-a-div/80745/1 "2017-01-26T08:57:23Z")

</div>

How can I center the image within my div without breaking the flow of the page?  
I want to center id=“image” within its div not within the page itself.  
[Link to codepen](http://codepen.io/x_navid/full/QGJZJm/)

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [January 26, 2017, 1:38pm UTC](https://forum.freecodecamp.org/t/centering-a-floated-image-within-a-div/80745/2 "2017-01-26T13:38:12Z")

</div>

Try getting rid of the `float`, then set it to `display: block;` and `margin: auto;`

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:11pm UTC](https://forum.freecodecamp.org/t/centering-a-floated-image-within-a-div/80745/3 "2021-01-16T17:11:17Z")

</div>

Closed on January 16, 2021, 5:11pm UTC