垂直对齐的SVG单选按钮

Question

我期望SVG和单选按钮为vertical-align: middle，并且让SVG的viewBox="0 0 100 100"垂直填充其包含DIV中的可用空间，而其自身垂直地与其包含DIV和将RB和SVG水平收缩包装。

.box {
    border: 3px solid grey; border-radius: 10px;
    width: 100%; height: 100px; padding: 10px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
}
.label-container {
    height: 100%;
    /*display: inline-block;*/
}
.radio_buttons {
    vertical-align: middle;
    display: inline-block;
}
.rb-icons {
    height: 100%;

    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
}

<div class="box header">
    <div class="box label-container">
        <label>
            <input type="radio" name="circlerect" class="radio-buttons"
                id="circ" value="foo" checked>
            <img class="icons" src='https://svgshare.com/i/GLu.svg'>
        </label>
        <label>
            <input type="radio" name="circlerect" class="radio-buttons"
                id="rect" value="bar">
            <img class="icons" src='https://svgshare.com/i/GMr.svg'>
        </label>
    </div>
</div>

我想念什么？

Answer 1

.box {
    border: 3px solid grey; border-radius: 10px;
    width: 100%; height: 100px; padding: 10px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
}
.box.header {
  justify-content: flex-end;
}
.label-container {
    height: 100%;
    /*display: inline-block;*/
    width: auto;
}
.label-container label {
    height: 100%;
}
.label-container img {
  height: 100%;
}
.label-container .icons {
  vertical-align: middle;
}
.radio-buttons {
    vertical-align: middle;
    display: inline-block;
}
.rb-icons {
    height: 100%;

    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
}

<div class="box header">
    <div class="box label-container">
        <label>
            <input type="radio" name="circlerect" class="radio-buttons"
                id="circ" value="foo" checked>
            <img class="icons" src='https://svgshare.com/i/GLu.svg' />
        </label>
        <label>
            <input type="radio" name="circlerect" class="radio-buttons"
                id="rect" value="bar">
            <img class="icons" src='https://svgshare.com/i/GMr.svg' />
        </label>
    </div>
</div>

像这样吗？