How to move Angular Component throughout the page - html

Question

I'm pretty new to the Angular framework and I'm making an app with a bunch of Angular components. Right now I'm trying to do a Search Page where I have an input for searching characters, and then after you've picked one of the lists it will show the character's stats card.
So what I want is to move both the search input and the card which appears after selecting a character in the middle of the screen, instead of having them both positioned at the left side of the screen.
Here is a picture that shows what I want to accomplish:
Here is my code right now (might be a bit messy but I just started like a month and a half ago learning JS, HTML, and CSS):
Search Component Template =>
<div fxLayot="column">
<div style="background: #4c4848" class="detailContainer">
<h1>Buscador de Personajes:</h1>
</div>
<br><br>
<div fxLayout="row">
<div fxLayot="column">
<form class="autocomplete-form">
<mat-form-field class="enable-full-width" style="background: #4c4848; border-radius: 5px; border: 4px solid black;">
<mat-label>Nombre</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="searchInput"
[matAutocomplete]="auto" (input)="search()">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="selectedOption($event)" [displayWith]="checkValue">
<mat-option *ngFor="let character of suggestions" [value]="character">
{{character.name}}
</mat-option>
<mat-option *ngIf="characters.length === 0 && searchInput.value.trim().length>0" value="">
ERROR 404 - No se encontró nada con el término "{{searchInput.value}}".
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
</div>
<span class="middler"></span>
<div *ngIf="selectedCharacter" fxLayout="column" style="width: 400px;">
<app-character-card [character]="selectedCharacter"></app-character-card>
</div>
(Don't know why they appear in distinct code blocks sorry for that)
Search Component CSS =>
.autocomplete-form {
min-width: 500px;
max-width: 500px;
width: 100%;
}
.enable-full-width {
width: 500px;
}
.detailContainer {
text-align: center;
justify-content: center;
align-items: center;
border: 5px solid black;
border-radius: 7px;
padding-top: 10px;
}
.centered {
text-align: center;
justify-content: center;
align-items: center;
}
Character Card Component Template =>
<mat-card>
<mat-card-header>
<div mat-card-avatar class="header-image"></div>
<mat-card-title class="charname">{{character.name}}</mat-card-title>
<mat-card-subtitle class="charage">{{character.age}}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image [src]="character | image">
<mat-card-content>
<mat-card-title>{{character.race}}</mat-card-title>
<mat-card-subtitle>{{character.class}}</mat-card-subtitle>
<hr>
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
<div fxLayout="row" fxLayoutGap="30px">
<div fxFlex="50">
<strong>Fuerza: </strong>{{character.strength}}
</div>
<div fxFlex="50">
<strong>Inteligencia: </strong>{{character.intelligence}}
</div>
</div>
<div fxLayout="row" fxLayoutGap="30px">
<div fxFlex="50">
<strong>Destreza: </strong>{{character.dexterity}}
</div>
<div fxFlex="50">
<strong>Carisma: </strong>{{character.charisma}}
</div>
</div>
<div fxLayout="row" fxLayoutGap="30px">
<div fxFlex="50">
<strong>Constitución: </strong>{{character.constitution}}
</div>
<div fxFlex="50">
<strong>Sabiduría: </strong>{{character.wisdom}}
</div>
</div>
</div>
<hr>
</mat-card-content>
<mat-card-actions>
<button mat-button color="warn" [routerLink]="['..', character.characterId]">
Leer Más
</button>
<button mat-button color="info" [routerLink]="['../../editcharacter', character.characterId]">
Editar
</button>
<a mat-button color="info" [routerLink]="['../..', character.userId, character.characterId, 'inventory']">
Inventario
</a>
</mat-card-actions>
Character Card Component CSS =>
mat-card {
margin-top: 20px;
}
img {
height: 500px;
}
.charname, .charage {
margin-top: 5px;
}
.header-image {
background-image: url('././assets/d20.png');
background-size: cover;
}
I really just need them positioned in the center. I also have this problem in my ItemSearchComponent, but I suppose If I can't answer this, I could easily extrapolate to the other one. Thanks!
If you need any more code just ask.

Answer 1

To achieve that put the search and the results-of-the-search on the same DIV, in "row mode" one below the other, then center that DIV horizontally with many methods out there I usually go for display:flex
<div class="head">
buscador de personajes
</div>
<div class="searchContainer">
<div class="searchVertical">
<div class="border">your<br>SearchBox</div>
<div class="border">search<br>Resuts</div>
</div>
</div>
CSS
.searchContainer {
width: 100% ;
display: flex ;
justify-content: center;
}
.searchVertical {
display:flex ;
flex-direction: column;
}
.border {
border : 1px red solid ;
}
.head {
width: 100% ;
border: 1px green solid ;
}
This is how it looks
https://www.geeksforgeeks.org/how-to-center-a-div-using-flexbox-property-of-css/