# The img element should be centered within its parent element

**URL:** <https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770>\
**Category:** General\
**Created:** [August 5, 2019, 1:27pm UTC](https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770 "2019-08-05T13:27:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![adamsmith1990](https://avatars.discourse-cdn.com/v4/letter/a/9f8e36/32.png) [@adamsmith1990](https://forum.freecodecamp.org/u/adamsmith1990)\
**Post date:** [August 5, 2019, 1:27pm UTC](https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770/1 "2019-08-05T13:27:05Z")

</div>

having a bit of trouble with this one. help please?  
a link to my pen is attached below  
[https://codepen.io/adamsmith1990/pen/ZgaRaW?editors=1000](https://codepen.io/adamsmith1990/pen/ZgaRaW?editors=1000)

---

<div class="post-metadata">

**Author:** ![Annestezia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/annestezia/32/74275_2.png) [@Annestezia](https://forum.freecodecamp.org/u/Annestezia)\
**Post date:** [August 5, 2019, 1:40pm UTC](https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770/2 "2019-08-05T13:40:22Z")

</div>

there is no such property as `align-image`

---

<div class="post-metadata">

**Author:** ![MatteoCarotta](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/matteocarotta/32/121142_2.png) [@MatteoCarotta](https://forum.freecodecamp.org/u/MatteoCarotta)\
**Post date:** [August 5, 2019, 1:45pm UTC](https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770/3 "2019-08-05T13:45:36Z")

</div>

Images are aligned by means of the attribute margin.  
To center an image horizontally use margin: 0 auto;  
For more details see the [MDN Docuemntation](https://developer.mozilla.org/en-US/docs/Web/CSS/margin), it’s a valuable tool to learn more about html elements, css properties and more…

---

<div class="post-metadata">

**Author:** ![ChrisCline1138](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chriscline1138/32/111745_2.png) [@ChrisCline1138](https://forum.freecodecamp.org/u/ChrisCline1138)\
**Post date:** [August 5, 2019, 1:48pm UTC](https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770/4 "2019-08-05T13:48:31Z")

</div>

One way to center an image is by using the margin property and a value of auto for the left and right sides.  
Another method would be to declare the parent division as a grid container and give the justify-items property a value of center.  
You will need to do a little research to learn the syntax of how to achieve this.

---

<div class="post-metadata">

**Author:** ![adamsmith1990](https://avatars.discourse-cdn.com/v4/letter/a/9f8e36/32.png) [@adamsmith1990](https://forum.freecodecamp.org/u/adamsmith1990)\
**Post date:** [August 5, 2019, 2:16pm UTC](https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770/5 "2019-08-05T14:16:55Z")

</div>

brilliant, thats done it! thank you!

---

<div class="post-metadata">

**Author:** ![adamsmith1990](https://avatars.discourse-cdn.com/v4/letter/a/9f8e36/32.png) [@adamsmith1990](https://forum.freecodecamp.org/u/adamsmith1990)\
**Post date:** [August 5, 2019, 2:18pm UTC](https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770/6 "2019-08-05T14:18:19Z")

</div>

thank you for messaging, ill look into this so ive learnt that as well

---

<div class="post-metadata">

**Author:** ![MatteoCarotta](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/matteocarotta/32/121142_2.png) [@MatteoCarotta](https://forum.freecodecamp.org/u/MatteoCarotta)\
**Post date:** [August 5, 2019, 2:27pm UTC](https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770/7 "2019-08-05T14:27:26Z")

</div>

You’s welcome, if it solved the problem mark it as solution and if you like it smash the like button, so future users with the same or similar problem can find the most relevant answer fast and easily.

---

<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 17, 2021, 9:33am UTC](https://forum.freecodecamp.org/t/the-img-element-should-be-centered-within-its-parent-element/302770/8 "2021-01-17T09:33:06Z")

</div>


