# Can someone explain why the image won't align-center?

**URL:** <https://forum.freecodecamp.org/t/can-someone-explain-why-the-image-wont-align-center/440756>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [January 15, 2021, 10:46am UTC](https://forum.freecodecamp.org/t/can-someone-explain-why-the-image-wont-align-center/440756 "2021-01-15T10:46:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![r.sah](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/r.sah/32/135484_2.png) [@r.sah](https://forum.freecodecamp.org/u/r.sah)\
**Post date:** [January 15, 2021, 10:46am UTC](https://forum.freecodecamp.org/t/can-someone-explain-why-the-image-wont-align-center/440756/1 "2021-01-15T10:46:56Z")

</div>

Here is my tribute page, I wonder why the image doesn’t align in the center?  
[https://codepen.io/Redsterdu075/pen/QWKBpeQ](https://codepen.io/Redsterdu075/pen/QWKBpeQ)

Thanks

---

<div class="post-metadata">

**Author:** ![Jill-Ann](https://avatars.discourse-cdn.com/v4/letter/j/278dde/32.png) [@Jill-Ann](https://forum.freecodecamp.org/u/Jill-Ann)\
**Post date:** [January 15, 2021, 11:52am UTC](https://forum.freecodecamp.org/t/can-someone-explain-why-the-image-wont-align-center/440756/2 "2021-01-15T11:52:58Z")

</div>

Do you want the image to be in the center with the text over the top of it? Or with the text underneath it?

---

<div class="post-metadata">

**Author:** ![r.sah](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/r.sah/32/135484_2.png) [@r.sah](https://forum.freecodecamp.org/u/r.sah)\
**Post date:** [January 15, 2021, 2:58pm UTC](https://forum.freecodecamp.org/t/can-someone-explain-why-the-image-wont-align-center/440756/3 "2021-01-15T14:58:30Z")

</div>

Hello Jill-Ann, with the text underneath it would be better. Thanks for your help

---

<div class="post-metadata">

**Author:** ![Jill-Ann](https://avatars.discourse-cdn.com/v4/letter/j/278dde/32.png) [@Jill-Ann](https://forum.freecodecamp.org/u/Jill-Ann)\
**Post date:** [January 15, 2021, 3:55pm UTC](https://forum.freecodecamp.org/t/can-someone-explain-why-the-image-wont-align-center/440756/4 "2021-01-15T15:55:17Z")

</div>

Try using flexbox. I had a look at your code pen and I can get the image to center by making the img-div a flex container and adjusting the properties. So in your css, on the #img-div, do:

```auto
  display: flex;
  flex-direction: column;
  align-items: center;

```

display: flex - This makes the div a flex container  
flex-direction: column - This tells it to make the axis vertical (not horizontal)  
align-items: center - This puts everything in the center.

I don’t know if this is the best way to do it, but at least it works.

Also, be careful in your html where you have the closing tags for the elements. For example you have the #img-div and image inside an h2 tag. You also have the whole list inside a p tag.

Let me know if it works!

Also if you need some more info about flexbox check out this page [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

---

<div class="post-metadata">

**Author:** ![r.sah](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/r.sah/32/135484_2.png) [@r.sah](https://forum.freecodecamp.org/u/r.sah)\
**Post date:** [January 15, 2021, 4:43pm UTC](https://forum.freecodecamp.org/t/can-someone-explain-why-the-image-wont-align-center/440756/5 "2021-01-15T16:43:49Z")

</div>

Thanks a lot Jill-Ann!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [July 17, 2021, 4:43am UTC](https://forum.freecodecamp.org/t/can-someone-explain-why-the-image-wont-align-center/440756/6 "2021-07-17T04:43:54Z")

</div>

Closed on July 17, 2021, 4:43am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.