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

Question

This question has been asked many times before.

The common answer is that it's sufficient to style with vertical-align: middle.

Perhaps the problem is that none of these questions asked with a self-contained, complete example. SVG is a nice way to make the example self-contained, but the problem applies for any kind of image.

After this long prelude, why does applying vertical-align: middle to both the radio group as well as to the SVG images not align them vertically to the middle?

<!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>

Giving weight to the thousands of upvotes, this Q & A suggest likewise that replacing the style above with this one:

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

ought to work. It doesn't. Why?

Update

I see from Michael's answer one potential source of confusion. I omitted to specify what I'm trying to vertically align (because my hunch is that it's poor styling to use image icons that are not already quite uniform—same height, same resolution, same line thicknesses—as you see here from the identical svg width/height/viewBox).

I'd like to vertically align the radio buttons with the images.

Update 2

If someone could add a brief comment to clarify why the present solution works, that would be nice. The discussions say "set vertical-align: middle to whichever element you're trying to vertically align". Here we're trying to vertically align the radio buttons to the images, not the other way around, and yet a correct solution is to apply "vertical-align: middle" to the images, not the radio buttons. Why?

score 0 · Accepted Answer · answered Jun 12 '17 at 15:32

0

You assign vertical-align to the taller of the two (the SVG), or you could just apply it to both if you're unsure of which will be taller.

<!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>

answered Jun 12 '17 at 15:32

Michael Coker

52,626
5
64
64

Wait a sec... Isn't this exactly what I initially wrote "ought to work, but doesn't". – Calaf Jun 12 '17 at 15:39
@Calaf you don't have `vertical-align` in the `svg` in your code. Is it not working in my answer? – Michael Coker Jun 12 '17 at 15:40
Sorry.. I meant: I see that your solution does work. I'm puzzled the exact same style hadn't worked for me. – Calaf Jun 12 '17 at 15:42
OK, thanks. But could you explain a bit what is happening? The discussions around this issue basically say (or at least I understood): "Identify what it is that you are trying to vertically align to what, and style that." Here we're trying to vertically align the radio buttons to the images, but we style instead the images, not the radio buttons. – Calaf Jun 12 '17 at 15:44
@Calaf what do you mean the same exact style hadn't worked for you? You didn't have `vertical-align` in your code. If you added it, it would work. If you added the same exact thing I did and it didn't work, but you added my code and it did work, then sounds like you made a mistake. Here is a good article on vertical align. http://christopheraue.net/2014/03/05/vertical-align/ – Michael Coker Jun 12 '17 at 15:48

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

1 Answers1