在按钮内居中 SVG 图标

Question

我有用作按钮的 <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>

Answer 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>

在按钮内居中 SVG 图标

Centering SVG Icon inside a button

html

css

svg

button