使用这个自包含示例解决图像 + 无线电的“vertical-align: middle”

Question

此问题已被问到 times before。

常见的答案是使用 vertical-align: middle 设置样式就足够了。

也许问题在于 none 这些问题是通过一个独立的完整示例提出的。 SVG 是使示例独立的好方法，但该问题适用于任何类型的图像。

在这么长的前奏之后，为什么应用 vertical-align: middle 到无线电组和 SVG 图像没有将它们垂直对齐到中间？

<!DOCTYPE HTML>
<head> 
    <meta charset="UTF-8">
    <style>
        .myRadio .myradioG { vertical-align: middle; }        
        svg { stroke:black; stroke-width:5; opacity:0.5; }
    </style>
</head>
<body>
    <label class="myLabel">
        <input type="radio" name="radioGroup" class="myradioG">
        <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>
</body>

考虑到成千上万的赞成票，这个 Q & A 同样建议用这个替换上面的样式：

<style>
    svg { stroke:black; stroke-width:5; opacity:0.5; vertical-align:middle; }
</style>

应该可以。它没有。为什么？

更新

我从 Michael 的回答中看到了一个潜在的混淆来源。我省略了指定我试图垂直对齐的内容（因为我的直觉是使用还不是很统一的图像图标的样式很差——相同的高度、相同的分辨率、相同的线条粗细——正如你在这里从相同的 svg 中看到的那样width/height/viewBox).

我想将单选按钮与图像垂直对齐。

更新 2

如果有人可以添加一个简短的评论来阐明为什么当前的解决方案有效，那就太好了。讨论说 "set vertical-align: middle to whichever element you're trying to vertically align"。在这里，我们试图将单选按钮垂直对齐到图像，而不是相反，但正确的解决方案是将 "vertical-align: middle" 应用于图像，而不是单选按钮。为什么？

Answer 1

您将 vertical-align 分配给两者中较高的一个（SVG），或者如果您不确定哪个更高，则可以将其应用于两者。

<!DOCTYPE HTML>
<head> 
    <meta charset="UTF-8">
    <style>
        svg { stroke:black; stroke-width:5; opacity:0.5; vertical-align: middle; }
    </style>
</head>
<body>
    <label class="myLabel">
        <input type="radio" name="radioGroup" class="myradioG">
        <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>
</body>

使用这个自包含示例解决图像 + 无线电的“vertical-align: middle”

Resolving `vertical-align: middle` for images + radio with this self contained example

css

vertical-alignment