2

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>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
Harshil Shah
  • 142
  • 2
  • 3
  • 13
  • why did you use this selector ? `router-outlet ~ * ` ? – Mihai T Mar 06 '19 at 08:52
  • 1
    What exactly are you trying to do? You are trying to align "it", but what is "it" ? Align in which way and where? – Jeremy Thille Mar 06 '19 at 08:52
  • Router-outlet is not customizable template element, you can achieve this using another layer after router-outlet. But you can simply customize your main class. I also recommend you to examine this SO topic, https://stackoverflow.com/a/34645811/5955138 – rcanpahali Mar 06 '19 at 09:37

3 Answers3

4

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>
Nithya Rajan
  • 4,722
  • 19
  • 30
  • Thank you so much @Bear Nithi. How did you know that we have to use align content and justify align? Can you elaborate a bit! Thanks again :) – Harshil Shah Mar 06 '19 at 09:26
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ this cheat sheet for flexbox will teach more than what i can expalin. it's a good material for flexbox. – Nithya Rajan Mar 06 '19 at 09:31
1

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.

jowey
  • 7,581
  • 6
  • 27
  • 46
0

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>
Patryk
  • 31
  • 4