Styling Angular 2 Psuedo Elements (directive elements?)

Question

I'm trying to horizontally center an element that is a child of the router-outlet, but it's not working. I think a parent of a centered element needs to have a physical width so the child has something to center to. But since the router-outlet is a pseudo element (I think that's what you call it), I'm not able to apply a width. I can apply a border to it for some reason, but no width... So how am I supposed to center within an element with no width? I MUST be missing something obvious here. I can't imagine an issue so obvious would be present in Angular.

Answer 1

There are no childs of router-outlet. Components added by the router are added as siblings. You might use something like

router-outlet + * {
  display : block;
  position:relative;
}

Answer 2

I'm guessing that maybe it is (and not sure on router-outlet)... Divs usually cover 100%. If you nest something like a span you could get results.

Answer 3

router-outlet is not a psudo element , it's a proper tag but might miss some initial properties.

Try applying this to your root css ( app.css ) and make sure app.ts has encapsulation:viewEncapsulation.None

router-outlet {

  display : block;
  position:relative;

}