[英]Why my svg is not centered inside div container?
I have the following code我有以下代码
.services-container { width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .services-container svg { width: 70px; /*margin: 0 auto; display: block; */ } .services-branding { width: 300px; } .services-branding figcaption { text-align: center; } .services-branding p { text-align: center; }
<div class="services-container"> <figure class="services-branding"> <svg xmlns="http://www.w3.org/2000/svg" width="120" height="124" viewBox="0 0 120 124" > <g> <g> <g><path fill="#d84848" d="M120 14H56v66h64L99.844 47z" /></g> <g><path fill="#aa1f1f" d="M56 66.75V80l17-11z" /></g> <g><path fill="#f57b71" d="M73 69H25L6.656 5H73z" /></g> <g> <path fill="#daeaf2" d="M4.436.18a5 5 0 0 1 6.123 3.536l30.54 113.98a5 5 0 0 1-9.658 2.587L.9 6.304A5 5 0 0 1 4.435.18z" /> </g> </g> </g> </svg> <figcaption>branding</figcaption> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. </p> </figure> </div>
My question is why the svg is not centered like others elements?我的问题是为什么 svg 不像其他元素那样居中? It only works when I add to svg display:block and margin: 0 auto but Im not sure if this the right way to center it.
它仅在我添加到 svg display:block 和 margin: 0 auto 时才有效,但我不确定这是否是将其居中的正确方法。 Could you guys explain me?
你们能帮我解释一下吗? Thanks from in advance!
提前致谢!
Its because text-align: center
would not center the <svg>
.这是因为
text-align: center
不会将<svg>
居中。 You need to apply the flexbox
properties to the direct parent of the <svg>
, which is .services-branding
like shown below:您需要将
flexbox
属性应用于<svg>
的直接父级,即.services-branding
如下所示:
.services-container { width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .services-container svg { width: 70px; } .services-branding { width: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .services-branding figcaption { text-align: center; } .services-branding p { text-align: center; }
<div class="services-container"> <figure class="services-branding"> <svg xmlns="http://www.w3.org/2000/svg" width="120" height="124" viewBox="0 0 120 124"> <g> <g> <g><path fill="#d84848" d="M120 14H56v66h64L99.844 47z" /></g> <g><path fill="#aa1f1f" d="M56 66.75V80l17-11z" /></g> <g><path fill="#f57b71" d="M73 69H25L6.656 5H73z" /></g> <g> <path fill="#daeaf2" d="M4.436.18a5 5 0 0 1 6.123 3.536l30.54 113.98a5 5 0 0 1-9.658 2.587L.9 6.304A5 5 0 0 1 4.435.18z" /> </g> </g> </g> </svg> <figcaption>branding</figcaption> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. </p> </figure> </div>
It's a property of SVG elements, their node points (viewport and viewbox) are by standard, starting on the top-left and not on the center of the SVG element.它是 SVG 元素的一个属性,它们的节点(视口和视框)是标准的,从左上角开始,而不是在 SVG 元素的中心。 So that's why whenever you try to center the vector, it doesn't fit right like images.
所以这就是为什么每当您尝试将矢量居中时,它都不像图像那样适合。
You could try to add :您可以尝试添加:
display: block;
margin: auto;
OR, add text-align: center;
或者,添加
text-align: center;
to the container <div>
到容器
<div>
Also, you could check out trying to add preserveAspectRatio="xMaxYMax meet"
to the <svg>
tag此外,您可以查看尝试将
preserveAspectRatio="xMaxYMax meet"
到<svg>
标签
I'd recommend you to have different sizes of the vector as images and use them accordingly on your needs while builing the code of your page, as it's easier to manipulate images rather than vectors on CSS.我建议您使用不同大小的矢量作为图像,并在构建页面代码时根据您的需要相应地使用它们,因为在 CSS 上操作图像而不是矢量更容易。
More information about vectors : https://www.w3schools.com/graphics/svg_intro.asp有关矢量的更多信息: https : //www.w3schools.com/graphics/svg_intro.asp
And about the preserveAspectRatio : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio关于preserveAspectRatio: https : //developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.