Question

我在父框中有一个SVG图标。一旦我开始向父级添加填充，SVG图标就会捕捉到框的底部附近。有什么想法吗？

相关的html：

<div class="icon">
    <svg viewBox="0 0 32 32" height="100%" width="100%">
        <path id="gear" fill-rule="evenodd" d="..."></path>
    </svg>
</div>

和css：

.icon {
    width   : 16px;
    height  : 16px;
    padding : 40px;
    border  : 1px solid #000;
}

Answer 1

通过删除width元素中的height和width，让您的浏览器自动处理height和<svg>。

<div class="icon">
    <svg viewBox="0 0 32 32">
        <path id="gear" fill-rule="evenodd" d="..."></path>
    </svg>
</div>

如果它不起作用，根据此错误https://bugs.webkit.org/show_bug.cgi?id=82489）请将此选择器放入样式表

svg {
    max-height: 100%;
}

结果如下：http://jsfiddle.net/gGfx5/3/

Answer 2

使用CSS垂直居中容器内的元素总是涉及某种黑客攻击，例如将父级的display属性设置为table-cell：

.parentContainer {
    display: table-cell;
}

这是你的小提琴，成功地使用了这种技术：http://jsfiddle.net/D87Vy/。请注意，这与子项是SVG的事实无关。

如果支持旧浏览器不是您的问题，您可以使用现代（和非hacky）CSS3 flexbox模块，它允许您实现父母中的任何子项安排。在流行的浏览器中，主要是IE7 - 10对flexbox有部分支持或不支持。上面的小提琴演示了如何通过将以下内容添加到父级来使孩子居中：

    display: flex;
    justify-content: center;

以下是flexbox指南：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

为什么我的SVG图标不居中？

2 个答案: