代码之家 › 专栏 › 技术社区 › Calaf

如何将缩放的单选按钮图标置于其DIV的中心?

centering svg css html

Calaf · 技术社区 · 4 年前

下面显示为黄色SVG圆圈的“徽标”可以按比例缩放 adjusting the height ratio (行由 <==== (1) 在代码中),在不修改SVG本身的情况下启用调优。

但即使 .left_center_myicon 大部分都是复制的 .right_center_myicon ,同样的调音 <==== (2) 不影响单选按钮图标。

如何将缩放的单选按钮图标置于其DIV的中心?我在这里使用内联SVG,甚至将它们更改为链接(从 <svg> 到 <img src="xyz.svg"> 这本身就是一个脆弱而微妙的变化。如果你看到了这个困难,请在回答中切换到链接的SVG。

使现代化

我希望单选按钮在其div中垂直居中,而div本身垂直居中,并在标题中右对齐。

理想情况下,我还希望能够从样式文件中调整SVG单选按钮图标的比例(尽管我开始怀疑这样做是否会违背既定的定制原则——换句话说,我想知道设计师是否最终会编辑SVG文件,而不是从CSS中操纵SVG的比例)。

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

内容 logo.svg 是:

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

0 回复 | 直到 4 年前

Alexandr_TT 4 年前

当有疑问时,flexbox会提供所有信息。再加一些包装纸。。。还有一个垫片。

我觉得与CSS float一起工作令人恼火,所以我像躲避瘟疫一样避开它。为了回答你的另一个问题,只要可能,我会将我的SVG内联,这样内部组件仍然可以使用CSS作为目标/样式。不过,这种方法应该适用于任何一种情况。

我试着做了一把小提琴,但连最简单的代码都做不到,所以我不确定那是我还是他们。。。。不过,在我的浏览器中,它在本地运行得很好。 https://imgur.com/AWrWK8Z

我添加了两个元素,中间的间隔元素设置为flex grow,因此它会占用所有可用的空间,将其他元素推到最右边/最左边。以及围绕输入/标签对的包装(以及孤独的左撇子)。我在标题容器和左右子容器上都使用了flex,以简化垂直居中。

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