css - 如何使 child 与其 parent 的左边界和上边界的距离相等？

Question

放大镜是一个很棒的字体图标。它的父框是列空间。我在父框上使用 justify-content: center 和 display: flex 来水平居中放大镜。但是如何使顶部的放大距离与其到父框的左边界或右边界的距离相同。所以它看起来像是位于一个看不见的正方形的中心。

Answer 1

这是一种使用填充来实现的方法。 div 代表侧边栏，白色方 block 代表图标。这里面主要要注意的是:

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

第一行使得添加填充不会使对象变大。第二个 like 将侧边栏所有内部的内边距设置为 (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，显示您目前为解决问题所做的尝试。