Comment centrer trois fichiers SVG sur la page ?

Question

J'ai trois fichiers SVG distincts qui, superposés les uns sur les autres, créent un graphique. Le premier fichier SVG est un triangle rouge, le deuxième est un cercle bleu situé à l'intérieur du triangle et le troisième est un rectangle violet situé à la base du triangle (avec un peu d'espace entre le triangle et le rectangle). Mon objectif est d'avoir les trois fichiers SVG les uns sur les autres au centre de la page. Ci-dessous mon code HTML et CSS. *{margin:0;padding:0;box-sizing:border-box;}.graphic{hauteur:1

P粉860897943 · Answer

Pour centrer et couvrir trois fichiers SVG, vous pouvez utiliser Flexbox et le positionnement absolu. Voici une version mise à jour du code HTML et CSS :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: palegreen;
  position: relative;
}

.triangle, .circle, .rectangle {
  position: absolute;
}

.circle {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.rectangle {
  bottom: 20px; /* Adjust this value to add space between the triangle and rectangle */
}




    
    
    
    Graphic-center

Un div externe avec la classe "graphic" aligne le fichier SVG horizontalement et verticalement à l'aide de Flexbox. Cela garantit qu’ils sont placés au centre de la page.

La position de chaque fichier SVG est définie sur une position absolue pour leur permettre de se chevaucher.

Le fichier SVG circulaire est centré dans son div parent, en utilisant margin: auto et en définissant tous les côtés (haut, droite, bas, gauche) sur 0. Cela centre le cercle horizontalement et verticalement dans le triangle.

Utilisez la propriété Bottom pour positionner le fichier SVG rectangulaire en bas. Vous pouvez ajuster la valeur « inférieure » pour augmenter ou diminuer l'espace entre les triangles et les rectangles.

P粉693126115 · Answer

Placez-les simplement tous dans la même ligne et la même colonne de la grille.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.graphic {
  background-color: palegreen;
  display: grid;
  place-items: center;
  grid-template-columns: 100vw;
  grid-template-rows: 100vh;
}

.triangle {
  z-index: 2;
}

.circle,
.rectangle,
.triangle {
  display: block;
  grid-column: 1;
  grid-row: 1;
}