如何让孩子与父母的左边界和上边界相等的距离相等？

Question

放大镜是一个字体很棒的图标。其父框是列空间。我使用了justify-content：center和display：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，显示到目前为止您尝试解决问题的方法。