为什么 DIV 中的 SVG 与 BUTTON 元素中的 SVG 对齐方式不同答案

【问题标题】：Why SVG inside DIV aligns different from SVG in BUTTON element为什么 DIV 中的 SVG 与 BUTTON 元素中的 SVG 对齐方式不同
【发布时间】：2022-02-07 17:08:20
【问题描述】：

我在 DIV 和 BUTTON 元素中有一个 SVG 元素。在 Button 中，它垂直和水平居中对齐，而在 DIV 中，它上下对齐。

我检查了这两个元素，但找不到使 SVG 在 BUTTON 中居中对齐的原因。用户代理样式表中一定有一些东西，但我找不到。

这是代码和演示：

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

【问题讨论】：

因为按钮上使用的内容总是居中的（用文本替换图像，你会看到它总是居中，因为这是按钮的自然行为和外观）。
它可能在斑点中定义，但我想知道引擎盖下的内容。 CSS 实际产生的行为。检查员不给我这些信息
部分信息：padding:0px 和 text-align: left 将更改水平居中对齐方式。在 chrome 中，这些是默认设置的（您可以在样式列表中查看）
我认为它根本不是 CSS，我认为它是内置在 HTML 框架中的东西以及它是如何工作的。此外，你的问题甚至不是一个真正的问题。
仅用于水平对齐。

标签： css svg

【解决方案1】：

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

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

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

div svg {
    height: 44px;
}

Demo here

【讨论】：