# Centering icons on menu tree

**URL:** <https://forum.inductiveautomation.com/t/centering-icons-on-menu-tree/98212>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [November 5, 2024, 2:49pm UTC](https://forum.inductiveautomation.com/t/centering-icons-on-menu-tree/98212 "2024-11-05T14:49:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gabriel\_Iglesias](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@Gabriel\_Iglesias](https://forum.inductiveautomation.com/u/Gabriel_Iglesias)\
**Post date:** [November 5, 2024, 2:49pm UTC](https://forum.inductiveautomation.com/t/centering-icons-on-menu-tree/98212/1 "2024-11-05T14:49:14Z")

</div>

Hi, I'm working on a menu tree, and wanted to make each item larger. To achieve this, I modified the itemStyle property and added "height". The problem with this is that the icons I'm using are no longer centered. This can be seen in the following image:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/df953fb6594e2e25430dd1dbaaf744a430478c4b.png)

Tried adding an "align : center" property on each icon but that did not work. Any clue on how to fix this? Thanks in advance.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [November 5, 2024, 3:08pm UTC](https://forum.inductiveautomation.com/t/centering-icons-on-menu-tree/98212/2 "2024-11-05T15:08:41Z")

</div>

Try with `alignItems` instead of just `align`.

But I believe the alignment in the menu tree items is a bit funky anyway (I didn't check, but I suspect the height of the icons is not the same as the height of the text, which results in things not being aligned).

If your items' height is fixed, here's how I'd align them:

```css
alignItems: flex-start
height: 80px
paddingTop: 30px

```

Play with the padding and height to get the results you want.

---

<div class="post-metadata">

**Author:** ![Gabriel\_Iglesias](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@Gabriel\_Iglesias](https://forum.inductiveautomation.com/u/Gabriel_Iglesias)\
**Post date:** [November 5, 2024, 3:10pm UTC](https://forum.inductiveautomation.com/t/centering-icons-on-menu-tree/98212/3 "2024-11-05T15:10:19Z")

</div>

That worked like a charm. Thank you!