html - 为什么我的 svg 不在 div 容器内居中?
问题描述
我有以下代码
.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>
我的问题是为什么 svg 不像其他元素一样居中?它仅在我添加到 svg display:block 和 margin: 0 auto 但我不确定这是否是正确的居中方式时才有效。你们能给我解释一下吗?预先感谢!
解决方案
这是因为text-align: center
不会将<svg>
. 您需要将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>