Question

我在DIV和BUTTON元素中有一个SVG元素。在Button中，它在垂直和水平中心对齐，在DIV中，它在顶部和左侧对齐。

我检查了这两个元素，但找不到是什么让SVG在BUTTON中间对齐。用户代理样式表中必定存在某些内容，但我找不到它。

以下是代码和演示：

<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;
}

Answer 1

如果您检查浏览器开发工具中的按钮，您将能够看到浏览器默认应用于按钮等元素的用户代理CSS规则（您可能需要启用此选项）。例如，在Chrome中，您会在text-align: center的CSS属性中找到<button>。但是，由于一个元素在另一个元素中的垂直居中不是可以使用标准CSS框技巧来完成的，因此您将找不到任何属性来执行此操作。 AFAIK是浏览器为按钮做的一件特别的事。

有些技巧允许你这样做，例如使用display: table-cell;，但在你的情况下，最简单的解决方案是让SVG引擎为你做。只需使用text-align: center进行水平居中，并将SVG高度设置为<div>高度，SVG引擎将完成其余工作。

button, div {
    ...
    text-align: center;
}

div svg {
    height: 44px;
}

Demo here

为什么DIV中的SVG与BUTTON元素中的SVG不同

1 个答案: