Grid css help needed justify-items: center; / align-items: center;

[erietman]

Hi,

I think there is simple answer for my question but can't get my head around it. I've got a panel container with grid layout. First element of the container is a led container, which I made smaller and round with css. Now I would like to center the element in it's container but I don't know what element to target in the css window (checked with Chrome dev tools but no luck). Any help is appreciated.

led-center.json (10.9 KB)

[DMDComposer]

Hi,

Does something like this work for you? Change out your css on the led widgets.

:host {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
  
inner {
  max-height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: red;
}

Cheers,
DMDComposer

[erietman]

@DMDComposer

inner {
  max-height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: red;
}

This did the trick, thanks!