Wie richtet man drei SVG-Dateien zentriert auf der Seite aus?

Question

Ich habe drei separate SVG-Dateien, die übereinander gelegt eine Grafik ergeben. Die erste SVG-Datei ist ein rotes Dreieck, die zweite ein blauer Kreis innerhalb des Dreiecks und die dritte ein violettes Rechteck an der Basis des Dreiecks (mit etwas Abstand zwischen Dreieck und Rechteck). Mein Ziel ist es, alle drei SVG-Dateien übereinander in der Mitte der Seite zu haben. Unten ist mein HTML- und CSS-Code. *{margin:0;padding:0;box-sizing:border-box;}.graphic{height:1

P粉860897943 · Answer

要居中对齐并覆盖三个 SVG 文件，您可以使用 Flexbox 和绝对定位。以下是 HTML 和 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

具有“graphic”类的外部 div 使用 Flexbox 水平和垂直居中对齐 SVG 文件。这确保它们被放置在页面的中心。

每个 SVG 文件的位置都设置为绝对位置，以允许它们相互重叠。

圆形 SVG 文件在其父 div 内居中，使用 margin: auto 并将所有边（上、右、下、左）设置为 0。这使圆在三角形内水平和垂直居中。

使用 Bottom 属性将矩形 SVG 文件定位在底部。您可以调整“bottom”的值来增加或减少三角形和矩形之间的空间。

P粉693126115 · Answer

只需将它们全部放在同一网格行和列中即可。

* {
  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;
}