How can I make nb-layout-column center and max width fixed

user_14683487 0
Viewed 93

enter image description here

I am working with Nebular on an Angular app, and I want to have a single column without a header and footer. I am also using Tailwind for my CSS and I want to center the column and also add max width to it.

Currently I have something like this:

<nb-layout class="place-items-center">
  <nb-layout-column class="max-w-7xl">
    <router-outlet></router-outlet>
   </nb-layout-column>
</nb-layout>

The problem here is that while the max width is applied the alignment is always against start and not center. I have tried every CSS tag with center in its name but nothing.

Nebular's nb-layout also has center tag but it makes the div too small, but it centers it. There might be a tag I can overwrite through my CSS but I cannot find it.

nebular tailwind-css angular css html
1 Answers

place-items-center only works within the context of display: flex or display: grid

try

<nb-layout class="grid place-items-center">
user_162697620
Related