J'ai déjà essayé beaucoup de choses et cherché de nombreuses pages mais je n'arrive pas à l'aligner au centre:
<mat-sidenav-content>
<div class="main">
<router-outlet></router-outlet>
</div>
La structure est comme ceci:
router-outlet ~ * {
position: absolute;
height: 100%;
width: 90%;
display: block;
margin: auto;
}
.main{
margin: 20px;
}
3 Réponses :
Utilisez CSS Flex Box pour aligner les éléments au centre. Vous ne pouvez pas centrer le Dans l'exemple ci-dessous, le div wrapper a une classe appelée router-outlet en utilisant le nom de balise router-outlet dans le css, car router-outlet n'est pas un élément de modèle personnalisable. Au lieu d'utiliser le nom de la balise router-outlet , essayez de l'encapsuler avec un div et appliquez les styles de boîte flexible à la classe du div. .main . justify-content: center est utilisé pour aligner les éléments sur le centre. .main {
display: flex;
align-items: center;
justify-content-center;
width: 90%;
}
<mat-sidenav-content>
<div class="main">
<router-outlet></router-outlet>
</div>
Merci beaucoup @Bear Nithi. Comment saviez-vous que nous devons utiliser aligner le contenu et justifier aligner? Pouvez-vous élaborer un peu! Merci encore :)
css-tricks.com/snippets/css/a-guide-to -flexbox cette feuille de triche pour flexbox apprendra plus que ce que je peux expliquer. c'est un bon matériau pour la flexbox.
Pensez à utiliser les attributs bootstraps Flex, ils vous facilitent la vie et permettent aux sites Web d'être très réactifs en ce qui concerne la résolution et les différentes tailles d'écran.
Lien utile - Bootstrap Flex
Un exemple de la façon de centrer quelque chose -
<div class="d-flex w-100>
<div class="d-flex align-items-centre justify-content-between">
Hello World!
</div>
</div>
Votre question est un peu vague, j'essaierai d'y répondre quand même. Veuillez commenter si je vous ai mal compris.
Comme je l'ai compris, vous essayez d'aligner horizontalement un conteneur frère d'un router-outlet-tag.
Pourquoi ne fonctionne pas?
La sortie du routeur n'a pas de propriété display définie. Par conséquent, sa largeur et sa hauteur sont de 0px et vous ne pouvez pas centrer un autre conteneur en fonction d'un élément de largeur 0px .
Solution strong>
router-outlet ~ #center-me {
margin: auto; /* example if center-me is a block-level element */
}
Cela vous permet de faire ce qui suit:
<div> <!-- some outer element --> <router-outlet> <div #center-me>CENTER ME</div> </div>
router-outlet {
display: block;
}
C'est possible, même je ne vous recommanderais pas de le faire. Un style selon un elemnt enveloppant serait probablement la meilleure approche.
pourquoi avez-vous utilisé ce sélecteur?
router-outlet ~ *?Qu'est-ce que vous essayez de faire exactement? Vous essayez d'aligner «ça», mais qu'est-ce que «ça»? Aligner de quelle manière et où?
Router-outlet n'est pas un élément de modèle personnalisable, vous pouvez y parvenir en utilisant une autre couche après la sortie du routeur. Mais vous pouvez simplement personnaliser votre classe principale. Je vous recommande également d'examiner ce sujet SO, stackoverflow.com/a/34645811/5955138