html - 垂直对齐 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>

是这样的吗？