如何让孩子的父母的距离与父母的距离相等？

Question

放大镜是一个字体真棒图标。其父框是列空间。我使用justify-content：center并在父框上显示：flex以放大镜水平居中。但是，如何使顶部的放大距离与父框的左边界或右边界的距离相同。所以它看起来像位于一个看不见的广场的中心。

Answer 1

这是一种使用填充的方法。 div代表侧栏，白色方块代表图标。在此要注意的主要事情是这样的：

box-sizing: border-box; 
padding:calc((10% - 40px)/2); 

第一行使得它如此添加填充不会使物体越大。第二种类似将边栏的所有内侧上的填充设置为(width of sidebar - width of icon)/2。这应该正确地居中图标并根据缩放或窗口大小调整值进行调整。

div.container { 
 
    background-color:lightblue; 
 
    height:200px; 
 
    display:inline-block; 
 
} 
 

 
div.square { 
 
    width:40px; 
 
    height:40px; 
 
    background-color:white; 
 
} 
 

 
div.c1 { 
 
    width:10%; 
 
    box-sizing: border-box; 
 
    padding:calc((10% - 40px)/2); 
 
} 
 

 
div.c2 { 
 
    width:15%; 
 
    box-sizing: border-box; 
 
    padding:calc((15% - 40px)/2); 
 
} 
 

 
div.c3 { 
 
    width:20%; 
 
    box-sizing: border-box; 
 
    padding:calc((20% - 40px)/2); 
 
}

<div class="container c1"> 
 
    <div class="square"></div> 
 
</div> 
 

 
<div class="container c2"> 
 
    <div class="square"></div> 
 
</div> 
 

 
<div class="container c3"> 
 
    <div class="square"></div> 
 
</div>

在未来也包括一些CSS或HTML显示你已经在试图解决这个问题到目前为止已经试过。