居中 SVG 按鈕內的圖標

Question

我有用作按鈕的<div> ，但我試圖用實際的<button>替換它們，以實現可訪問性並允許 tab 鍵專注於我的按鈕。 每個按鈕都包含一個居中的 SVG 圖像。 但是當我換掉我的標簽時，圖像就偏離了中心。 （它們也變成了灰色，但這很容易用background-color:transparent;樣式修復。）

有人知道為什么這兩個按鈕的居中不同嗎？ 我怎樣才能正確地使左側居中，從左到右和從上到下，同時保持正確的<button> ？

謝謝。

<html>
    <head>
        <style>
            .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;}
        </style>
    </head>
    <body>  
        <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>
    </body>
</html>

Answer 1

沒關系。 我可以通過將填充設置為 0px 來修復它。 （把它留在這里以防其他人需要它。）

居中 SVG 按鈕內的圖標

問題描述

1 個解決方案

解決方案1
0 2022-01-09 01:30:03

居中 SVG 按鈕內的圖標

問題描述

1 個解決方案

解決方案1 0 2022-01-09 01:30:03

解決方案1
0 2022-01-09 01:30:03