Question

你能帮助我理解为什么我的svg拒绝调整高度以帮助我垂直居中于div容器吗？

如何处理容器中的垂直svg？我似乎svg行为不像div那样标准......

主要思想是将水平和垂直居中放入div。

我试试这个：https://jsfiddle.net/gbz7rp7u/1/#&togetherjs=0n9iL62pHv

<div id="svg-container">
  <svg id="svg-1" height="50%" width="50%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle r="15" cx="350" cy="80"></circle>
  </svg>
</div>

#svg-container
{
  background-color: red;
}

#svg-1
{
  margin: auto auto;
  display: block;
  height: 30%;
}

Answer 1

＆＃13;

html, body {
   height: 100%;  
}
#svg-container
{
  display: flex;
  align-items: center;
  background-color: red;
  height: 100%;
}

#svg-1
{
  margin: 0 auto;
  display: block;
}

＆＃13;

<div id="svg-container">
  <svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle r="15" cx="15" cy="15"></circle>
  </svg>
</div>

＆＃13;

Answer 2

＆＃13;

html, body {
   height: 100%;  
}

#svg-container {
  background-color: red;
  height: 100%;
}

#svg-1 {
  display: block;
  margin: auto;
  height: 100%;
}

＆＃13;

<div id="svg-container">
  <svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle r="15" cx="15" cy="15"></circle>
  </svg>
</div>

＆＃13;

div容器中的垂直中心svg

2 个答案: