J'essaie de centrer une icône dans une barre d'outils matérielle. Malheureusement, il a déplacé un peu à droite parce que j'ai une image seconde au côté de Lefter. Voici mon code:
.logo{
height: 56px;
width: 56px;
vertical-align: middle;
}
.premiumPartner{
height: 30px;
position: relative;
vertical-align: middle;
}
.span {
margin: auto;
3 Réponses :
Si j'ai bien compris votre question correctement, vous souhaitez centrer l'image centrale au milieu de l'écran fort> lui-même. J'ai remarqué que votre image gauche utilise la position: par rapport à laquelle elle pousse le contenu quand Il est affiché, la modifiant en absolu résoudre ce problème, mais vos images commenceraient à grimper les unes sur les autres lorsque l'écran devient plus petit. P> .premiumPartner {
height: 30px;
vertical-align: middle;
/* changed values */
position: absolute;
}
Pour cela, vous devez utiliser FlexLayout: HTTPS: //www.npmjs. com / emballage / @ angulaire / flex-layout
Voici un exemple de fonctionnement: P>
<mat-toolbar color="primary">
<mat-toolbar-row fxLayout fxLayoutAlign="space-between center>
<img class="premiumPartner" src="https://resources.redbull.com/logos/redbullcom/v1/redbullcom-logo.svg">
<img class="logo" src="../assets/eatsmarticon.png">
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">tune</mat-icon>
</mat-toolbar-row>
</mat-toolbar>
J'utilise toujours standard html pour des choses comme ceci. Fonctionne toujours, zéro temps passé codage.
0 commentaires