为什么DIV中的SVG与按钮元素中的SVG对齐不同
为什么DIV中的SVG与按钮元素中的SVG对齐不同
提问于 2015-01-20 00:39:57
我在DIV中有一个SVG元素和一个BUTTON元素。在Button中，它垂直和水平居中对齐，在DIV中，它上下对齐。
我检查了这两个元素，但找不到是什么使SVG中的对齐按钮居中。用户代理样式表中一定有什么东西，但我找不到。
代码和演示如下：
http://jsfiddle.net/eoyx659n/
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M21.99 4c0-1.1-.89-2-1.99-2h-16c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path>
<path d="M0 0h24v24h-24z" fill="none"></path>
</svg>
</button>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M21.99 4c0-1.1-.89-2-1.99-2h-16c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path>
<path d="M0 0h24v24h-24z" fill="none"></path>
</svg>
</div>
button, div {
padding: 0;
margin: 8px;
width: 44px;
height: 44px;
border: 1px solid;
background-color: transparent;
}
button svg, div svg {
padding: 0;
margin: 0;
}回答 1
Stack Overflow用户
发布于 2015-01-20 14:45:43
如果您在浏览器的开发工具中检查按钮，您将能够看到浏览器默认情况下应用于按钮等元素的用户代理CSS规则(您可能需要启用此选项)。例如，在Chrome中，你会在<button>的CSS属性中找到一个text-align: center。但是，由于一个元素在另一个元素中垂直居中不是使用标准CSS框实现的，因此您将找不到任何属性来实现这一点。AFAIK这是浏览器为按钮做的一件特殊的事情。
有一些技巧可以让您做到这一点，比如使用display: table-cell;，但在您的例子中，最简单的解决方案是让SVG引擎为您做这件事。只需使用text-align: center进行水平居中，并将SVG height设置为<div>高度，SVG引擎将完成其余工作。
button, div {
...
text-align: center;
}
div svg {
height: 44px;
}Demo here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28029480
复制相关文章
相似问题
腾讯云开发者
