I've been attempting to horizontally center the content within a router-outlet in Angular, but none of the usual methods I've tried seem to be working. After scouring Google for solutions, I experimented with:
- using display: block; margin: 0 auto;
- placing it inside a div and applying the above code
- trying to target the component that may or may not be present depending on the route
- achieving centering by adding padding to the body, but this method is not consistent across all screen sizes
- testing display: block; margin: 0 auto; with an image placed above the component (which worked)
- utilizing the deprecated 'center' tag
- applying text-align: center;
This project is built using Angular 2+.
HTML:
<img src="https://i.ibb.co/6R6pcMm/MRG-Updated-Logo.jpg" /> <!--centered-->
<router-outlet></router-outlet> <!--not_centered-->
CSS:
img {
display: block;
margin: 0 auto;
}
router-outlet {
display: block;
margin: 0 auto;
}