我有<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>uj5u.com熱心網友回復：
沒關系。我可以通過將填充設定為 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/409182.html
標籤：