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

Question

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.

I mean to add separate photos for what you have and what you want to look like. — , May 24 '22 at 12:33
As you see in the photo I want the nb-layout-coloumn to be centered rather than placed at `start` — Ioannis Tsiakkas, May 25 '22 at 10:10

score 0 · Answer 1 · answered Aug 16 '22 at 00:28

0

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

try

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

answered Aug 16 '22 at 00:28

Donald Duck

618
2
6

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

1 Answers1