Centering icons on menu tree

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:

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

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:

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

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

3 Likes

That worked like a charm. Thank you!