在按钮内居中 SVG 图标答案

【问题标题】：Centering SVG Icon inside a button在按钮内居中 SVG 图标
【发布时间】：2022-01-09 01:28:09
【问题描述】：

我有 <div>s 用作按钮，但我试图用实际的 <button>s 替换它们，以实现可访问性并允许 tab 键专注于我的按钮。每个按钮都包含一个居中的 SVG 图像。但是当我换掉我的标签时，图像就偏离了中心。（它们也变成了灰色，但使用 background-color:transparent; 样式很容易解决。）

有人知道为什么这两个按钮的居中不同吗？我怎样才能正确地使左侧居中，从左到右和从上到下，同时保持正确的<button>？

谢谢。

.control-panel {
  border: 1px solid #0000;
  display: flex;
  justify-content: space-between;
}

.button {
  border: 1px solid #000;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: transparent;
  align-items: center;
  cursor: pointer;
}

svg {
  background-color: #0f84;
}

<div class="control-panel" style="width: 100px;">
  <button class="button" style="height: 39px; width: 39px;"> <!-- BUTTON, BUT NOT CENTERED -->
                <svg style="height: 37px; width: 37px;" viewBox="-18.5 -18.5 37 37" xmlns="http://www.w3.org/2000/svg"><path d="M12,-12 L12,12 L-12,12 L-12,-12 Z" stroke="#000" fill="none" stroke-width="1.5"></path></svg>
            </button>
  <div class="button" style="height: 39px; width: 39px;">
    <!-- DIV, BUT CENTERS CORRECTLY -->
    <svg style="height: 37px; width: 37px;" viewBox="-18.5 -18.5 37 37" xmlns="http://www.w3.org/2000/svg"><path d="M12,-12 L12,12 L-12,12 L-12,-12 Z" stroke="#000" fill="none" stroke-width="1.5"></path></svg>
  </div>
</div>

【问题讨论】：

标签： html css svg button

【解决方案1】：

没关系。我可以通过将填充设置为 0px 来修复它。（留在这里以防其他人需要。）

.control-panel {
  border: 1px solid #0000;
  display: flex;
  justify-content: space-between;
}

.button {
  padding:0;
  border: 1px solid #000;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: transparent;
  align-items: center;
  cursor: pointer;
}

svg {
  background-color: #0f84;
}

<div class="control-panel" style="width: 100px;">
  <button class="button" style="height: 39px; width: 39px;"> <!-- BUTTON, BUT NOT CENTERED -->
    <svg style="height: 37px; width: 37px;" viewBox="-18.5 -18.5 37 37" xmlns="http://www.w3.org/2000/svg">
      <path d="M12,-12 L12,12 L-12,12 L-12,-12 Z" stroke="#000" fill="none" stroke-width="1.5"/>
    </svg>
  </button>
</div>

【讨论】：