如何在 DIV 中将缩放的单选按钮图标居中？

Question

下面显示为黄色 SVG 圆圈的“徽标”可以按缩放（代码中 <==== (1) 指示的行），无需修改 SVG 本身即可进行调整。

但即使 .left_center_myicon 在 .right_center_myicon 中大部分重复，<==== (2) 中的相同调整也不会影响单选按钮图标。

如何让缩放的单选按钮图标在 DIV 中居中？我在这里使用内联 SVG，因为甚至将它们更改为链接（从 <svg> 到 <img src="xyz.svg"> 本身就是一个脆弱而微妙的变化。如果您看到这个困难，请在您的答案中切换到链接的 SVG。

更新

我希望单选按钮在 div 中垂直居中，而 div 本身在 header 中垂直居中并右对齐。

理想情况下，我还希望能够从样式文件中调整 SVG 单选按钮图标的比例（尽管我开始怀疑这样做是否有悖于既定的习惯——换句话说，我想知道设计师是否最终会编辑 SVG 文件，而不是从 CSS).

中操纵 SVG 的比例

.header {
    width: 100%;
    height: 300px;
    background-color: #ddd;
    margin: 5px;
    align-items:center;
    display: block;
    text-align: center;
}
.left_center_myicon {
    margin: 0 auto;
    
    background-color: #bbb;

    float: left;
    height: 70%; /* <==== (1) */
    position: relative;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
}

.right_center_myicon {
    background-color: #ccc;
    margin: 0 auto;
    
    float: right;
    height: 70%; /* <==== (2) */
    position: relative;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);

    vertical-align: middle;
}

svg { stroke:black; stroke-width:5; opacity:0.5; vertical-align: middle; }

<div class="header">
    <a href="index.html">
        <img class="left_center_myicon" src="svg/logo.svg"/>
    </a>

    <div class="right_center_myicon">
        <label class="myLabel">
            <input type="radio" name="radioGroup" class="myradioG" checked>
            <svg width="100" height="100" viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="30" style="fill:blue;" />
            </svg>
        </label>
        <label class="inline-radio">
            <input type="radio" name="radioGroup" class="myradioG">
            <svg width="100" height="100" viewBox="0 0 100 100">
                <rect x="20" y="20" rx="15" ry="15" width="60" height="60" style="fill:red;" />
            </svg>
        </label>
    </div>

</div>

logo.svg的内容是：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="160" height="120"
    viewBox="0 0 160 120"
    version="1.1">
    <g>
        <circle cx="80" cy="60" r="50" fill="yellow" stroke="blue" stroke-width="10" />
    </g>
</svg>

Answer 1

当有疑问时，flexbox 所有的东西。并添加一些包装器...和一个 spacer.

我发现 CSS 浮点数工作起来很烦人，所以我像避开瘟疫一样避开它。为了回答你的其他问题，只要有可能，我都会将我的 svgs 内联，这样内部组件仍然可以是 targeted/styled 和 CSS。不过，这种方法应该适用于任何一种方法。

我尝试制作一个 fiddle 但即使是最简单的代码也无法工作或显示任何东西，所以我不确定那是我还是他们......在我的浏览器中本地运行良好尽管。 https://imgur.com/AWrWK8Z

我添加了 2 个元素，一个中间的 spacer 元素设置为 flex grow 所以它占用了所有可用的 space 它可以，将其他元素推到 right/left .以及 input/label 对的包装纸（以及唯一剩下的人）。我在 header 容器和左右 child 容器上都使用了 flex，以简化垂直居中。

.header {
        width: 100%;
        height: 300px;
        display: flex; 
        align-items: center;
        background-color: #ddd;  
    }
    .spacer {
        flex: 1 0 auto;
        background: rgba(200,200,200,1);
    }
    .left {   
        background-color: #bbb;  
    } 
    .right {  
        background-color: #ccc;  
    }
    .wrapper {  
        display: flex;
        height: 70%;
        align-items: center; 
        outline: 1px solid blue;
    }
    .wrapper > div {
        flex: 1 1 auto;
        outline: 1px solid black;
    }

   <div class="header"> 

        <div class="left wrapper">
           <div>
                <a>
                    <svg  xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="160" height="120"
                        viewBox="0 0 160 120"
                        version="1.1">
                        <g>
                            <circle cx="80" cy="60" r="50" fill="yellow" stroke="blue" stroke-width="10" />
                        </g>
                    </svg>
                </a>
            </div>
        </div> 

        <div class="spacer"></div>
 
        <div class="right wrapper"> 
            <div>
                <label class="myLabel">
                    <input type="radio" name="radioGroup" class="myradioG" checked>
                    <svg width="100" height="100" viewBox="0 0 100 100">
                        <circle cx="50" cy="50" r="30" style="fill:blue;" />
                    </svg>
                </label>
            </div>

             <div>
                <label class="inline-radio">
                    <input type="radio" name="radioGroup" class="myradioG">
                    <svg width="100" height="100" viewBox="0 0 100 100">
                        <rect x="20" y="20" rx="15" ry="15" width="60" height="60" style="fill:red;" />
                    </svg>
                </label>
            </div> 
        </div> 

    </div>

如何在 DIV 中将缩放的单选按钮图标居中？

How can I center scaled radio button icons in their DIV?

html

css

svg

centering