如何使孩子与其父母的左边界和上边界的距离相等？答案

【问题标题】：How do I make a child''s distances from left and top boundary of its parent equal?如何使孩子与其父母的左边界和上边界的距离相等？
【发布时间】：2018-02-02 17:29:55
【问题描述】：

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

【问题讨论】：

您可以使用padding 或flex。
你能显示一些html吗？
如果你发布你拥有的代码，一个最小的工作代码sn-p，你会增加你得到正确答案的机会

标签： css flexbox styling

【解决方案1】：

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

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，显示您迄今为止尝试解决问题的尝试。

【讨论】：

我真的希望放大镜随着柱子变宽而变大。