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

Question

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

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

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

更新

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

理想情况下，我还希望能够从样式文件中调整 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 所有的东西。并添加一些包装器......和一个垫片。

我发现 CSS float 令人抓狂，所以我像避免瘟疫一样避免它。为了回答您的其他问题，我尽可能将我的 svgs 内联，以便内部组件仍然可以使用 CSS 定位/设置样式。不过，这种方法应该适用于任何一种。

我尝试制作一个小提琴，但即使是最简单的代码也无法工作或显示任何内容，所以我不确定是我还是他们……虽然在我的浏览器中本地工作得很好。 https://imgur.com/AWrWK8Z

我添加了 2 个元素，一个中间间隔元素设置为 flex 增长，因此它可以占用所有可用空间，将其他元素推向右侧/左侧。以及围绕输入/标签对的包装器（以及唯一的左派）。我在标题容器和左右子容器上都使用了 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>