如何在頁面上居中對齊三個 SVG 檔案？

Question

我有三個獨立的SVG文件，當它們彼此層疊時，它們將創建一個圖形。第一個SVG檔案是一個紅色三角形，第二個是位於三角形內部的藍色圓圈，第三個是位於三角形底部的紫色矩形（三角形和矩形之間有一點空間）。我的目標是將所有三個SVG檔案在頁面中央相互疊加。下面是我的HTML和CSS程式碼。 *{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;
}