无法获取css以应用于Angular Component

Question

I've been stuck on this for a while.

I created an Angular component called app-place-icon-avatar.

I would like the app-place-icon-avatar to be either 55px in height or 100% the height of the div.

I've tried a bunch of things.

Please see the screenshot for what I am referencing.

The html element shows 17px tall when I inspect it, but the css of 55px seems to be applied correctly.

I've tried applying ::host /deep/, ::host, applying a style directly to place-icon-avatar in the parent component's html.

The css seems to be being applied when I inspect it. It says height 100% on the right, but the actual app-place-icon-avatar is 17px no matter what I do.

I'm new to angular, and I'm sorry if I am missing something basic, but I've searched for a while and can't find anything that works.

The reason I would like to make this component a certain height, is that it is easier to center it. Since the image within the app-place-icon-avatar is 55px, but the app-place-icon-avatar itself is only 17px high, it makes it difficult to center it vertically. I would like to make it as simple as possible.

:host /deep/ {
  height: 50px;
}

I am expecting the app-place-icon-avatar to be either 55px or 100% in height. It is 17px no matter what I try.

https://imgur.com/qQBk3nh

Answer 1

Jojofoulk gave me the answer, which was to change the displaymode to flex or block. That solved the issue.