div容器中的垂直中心svg [英] vertical center svg in div container
本文介绍了div容器中的垂直中心svg的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您能帮助我理解为什么我的svg拒绝调整高度以帮助我在div容器中垂直居中吗?
Can you help me to understand why my svg refuse to resize the height for helping me to center vertically in a div container ?
如何处理容器中的垂直svg对齐?我似乎svg行为不像div那样标准.
How can I process for align vertical svg in a container ? I seem to svg behaviour is not standard like div...
主要思想是将水平和垂直svg居中划分为div.
The main idea is that center horizontally AND vertically svg into a 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%;
}
推荐答案
html, body {
height: 100%;
}
#svg-container
{
display: flex;
align-items: center;
background-color: red;
height: 100%;
}
#svg-1
{
margin: 0 auto;
display: block;
}
<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>
这篇关于div容器中的垂直中心svg的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文