CODEWITHSUNDEEP
javascripthtmlcssangularweb
Harshil Shah
Harshil Shah

Reputation: 152

CSS Centre element in Angular Router element

I have tried a lot already and searched many pages but I can't seem to center align it:

See app photo

router-outlet ~ * {
  position: absolute;
  height: 100%;
  width: 90%;
  display: block;
  margin: auto;
}

.main{
    margin: 20px;
}

The structure is like this:

<mat-sidenav-content>
  <div class="main">
    <router-outlet></router-outlet>
  </div>

Upvotes: 2

Views: 1928

Answers (3)

Nithya Rajan
Nithya Rajan

Reputation: 4884

Use CSS Flex Box to align items to center.

You can't center the router-outlet by using the router-outlet tag name in the css, Because router-outlet is not customizable template element. Instead of using the router-outlet tag name, try wrapping it with a div and apply the flex box styles to the div's class.

In the below example the wrapper div has a class called .main.

justify-content: center is used to align the items to the center.

.main {
  display: flex;
  align-items: center;
  justify-content-center;
   width: 90%;
}

<mat-sidenav-content>
  <div class="main">
    <router-outlet></router-outlet>
  </div>

Upvotes: 4

jowey
jowey

Reputation: 8311

Your question is described a bit vague, I will try to answer it anyway. Please comment if I got you wrong.

As I understood, you try to horizontally align a sibling container of an router-outlet-tag.

Why it is not working?
The router outlet has no defined display property. Therefore it's width and height is 0px and you are not able to center another container according to a 0px width element.

Solution

router-outlet {
  display: block;
}

This enables you to do the follwing:

<div> <!-- some outer element -->
  <router-outlet>
  <div #center-me>CENTER ME</div>
</div>

router-outlet ~ #center-me {
  margin: auto; /*  example if center-me is a block-level element */
}

It is possible, even I wouldn't recomend you to do so.Styling according to an wrapper elemnt would possibly be the better aproach.

Upvotes: 1

Patryk
Patryk

Reputation: 31

Consider using bootstraps Flex attributes, they make your life much easier and allow the websites to be very responsive in regards to resolution and different screen sizes.

Useful Link - Bootstrap Flex

An example of how to centre something -

<div class="d-flex w-100>
  <div class="d-flex align-items-centre justify-content-between">
    Hello World!
  </div>
</div>

Upvotes: 0

Related Questions