How can I center scaled radio button icons in their DIV?

Question

The "logo" appearing as a yellow SVG circle below can be scaled by adjusting the height ratio (line indicated by <==== (1) in the code), enabling tuning without modifying the SVG itself.

But even though .left_center_myicon is mostly duplicated in .right_center_myicon, the same tuning in <==== (2) does not affect the radio button icons.

How can I center scaled radio button icons in their DIV? I'm using here inline SVGs as even changing them to be linked (from <svg> to <img src="xyz.svg"> is itself a brittle and subtle change. If you see that difficulty, please switch to linked SVGs in your answer.

Update

I'd like the radio buttons to be vertically centered in their div, while that div is itself vertically centered and right justified in the header.

Ideally, I'd also like to be able to adjust the scale of the SVG radio button icons from the style file (although I'm starting to wonder whether doing so might be going against the grain of established custom—in other words, I'm wondering if perhaps designers end up editing the SVG files rather than manipulating the scale of the SVGs from CSS).

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

The content of logo.svg is:

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

Could you post an image of what exactly you want? When you say 'center', you mean horizontally, vertically or both? — Calvin Nunes, Nov 09 '21 at 19:36
@CalvinNunes Could you read the update and see if the question is now clearer? — Calaf, Nov 10 '21 at 00:28

score 1 · Accepted Answer · edited Nov 12 '21 at 06:41

When in doubt, flexbox all the things. And add some wrappers... and a spacer.

I find CSS float maddening to work with, so I avoid it like the plague. And to answer your other question, whenever possible I include my svgs inline so the inner components can still be targeted/styled with CSS. This approach should work with either though.

I tried making a fiddle but couldn't get even the simplest code to work or display anything, so I'm not sure if that's me or them.... Works great locally in my browser though. https://i.stack.imgur.com/dIXjI.jpg

I made 2 additions, a middle spacer element set to flex grow so it takes up all the available space it can, pushing the other elements far to the right/left. And wrappers around the input/label pairs (and the lone left guy). I used flex on both the header container and the right and left child containers, to simplify vertical centering.

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

That looks like going on the right track, but: 1- Raising or lowering the `70` in `height: 70%;` no longer magnifies or shrinks the SVGs, and 2- the radio button widgets are no longer centered along with their SVG icons. — Calaf, Nov 10 '21 at 09:30
For the svgs to scale you have to remove the fixed height and width attributes and replace them with something relative, like 100%. Then they fill whatever container they are put in according to the aspect ratio defined by the viewBox attribute. Your svg file contents had them like that so I assumed a fixed size was desired. Its generally not a good idea to explicitly set height and width for svgs if you want them to be responsive. Do they stretch like how you want when used in an img tag, despite the height and width being specified? Its been forever since ive tried them in img tags... — diopside, Nov 10 '21 at 09:33
I'm using the following order: 1- Set the header's height in `px`, not as a percentage of the overall height. 2- Adjust ratio of SVG icons in header. I think you're suggesting: A- Set the header's height as percentage, B- Set SVG icons as percentage of header. 1- may be different from A-, but 2- is still the same as B-, no? — Calaf, Nov 10 '21 at 16:46
The header *should* be able to be whatever height you need/want. I was just saying to set the svg icons width and height attributes as percentages. I may be misremembering how they work in tags though. Thats my bad, I should have just posted my answer using the img tag like your OP. — diopside, Nov 10 '21 at 17:41

How can I center scaled radio button icons in their DIV?

1 Answers1