# Why is my image not centering?

**URL:** <https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576>\
**Category:** General\
**Created:** [August 26, 2021, 6:33am UTC](https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576 "2021-08-26T06:33:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![m.meuwese](https://avatars.discourse-cdn.com/v4/letter/m/5fc32e/32.png) [@m.meuwese](https://forum.pinegrow.com/u/m.meuwese)\
**Post date:** [August 26, 2021, 6:33am UTC](https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576/1 "2021-08-26T06:33:54Z")

</div>

Hello all,

Starting new with Pinegrow and some experience with web design. Though, when using a teamblock i’m unable to center the image on the page (Tailwind). Tried several options and tested on different locations applying the css styles for centering items though all failed.

Can someone take a brief look and let me know what i’m doing wrong?

[https://www.energycellscharger.com/about.html](https://www.energycellscharger.com/about.html)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 26, 2021, 9:28am UTC](https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576/2 "2021-08-26T09:28:32Z")

</div>

Hi @m.meuwese,  
Add classes of `flex` and `justify-center` to the div wrapping your image. That should do the trick.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![m.meuwese](https://avatars.discourse-cdn.com/v4/letter/m/5fc32e/32.png) [@m.meuwese](https://forum.pinegrow.com/u/m.meuwese)\
**Post date:** [August 27, 2021, 5:41am UTC](https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576/3 "2021-08-27T05:41:31Z")

</div>

Thx, that worked. I will have a look what that ‘flex’ means. it worked as you described.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 27, 2021, 9:13am UTC](https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576/4 "2021-08-27T09:13:46Z")

</div>

Hi @m.meuwese,  
The justify classes are used within flex to orient items along the horizontal axis.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![Louder26](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Louder26](https://forum.pinegrow.com/u/Louder26)\
**Post date:** [September 3, 2021, 9:53am UTC](https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576/5 "2021-09-03T09:53:59Z")

</div>

You can _center_ a _picture_ by enclosing the ![]() tag in the \< _center_ \>\</ _center_ \> tags. This action centers that, and only that, _picture_ on the web[.](https://www.mysainsburys.me/)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [September 3, 2021, 10:15am UTC](https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576/6 "2021-09-03T10:15:18Z")

</div>

Hi @Louder26,  
The `<center>` tag has been deprecated in HTML5. It is unclear if this will be supported in browsers going forward.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![mxs](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mxs/32/2943_2.png) [@mxs](https://forum.pinegrow.com/u/mxs)\
**Post date:** [September 3, 2021, 2:59pm UTC](https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576/7 "2021-09-03T14:59:36Z")

</div>

Assuming bootstrap 5, add class to image - class=“d-block mx-auto”

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [September 3, 2021, 6:37pm UTC](https://forum.pinegrow.com/t/why-is-my-image-not-centering/5576/8 "2021-09-03T18:37:54Z")

</div>

Guys please don’t forget good old **text-align: center** , for inline elements and texts this is the first thing we should use. So that you don’t have to use two styles, one for texts and another for image (or inline elements)

But in above case, TailwindCSS is used and Tailwind by default applies **display: block** to images. So you can just use class **inline** on that image, if parent element has class **text-center**. If not you can also apply class **mx-auto** , best incase you only have to center the image.

Good thing about **text-align** is that it is applied through descendent, so when you change alignment of the parent element it will be applied to the child elements as well. And you don’t have to specifically apply to a particular element. Even for responsive, you’ll have less work to do.
