如何讓孩子的父母的距離與父母的距離相等？

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顯示你已經在試圖解決這個問題到目前爲止已經試過。