html - 父 div 相对于子 div 的位置

Question

我有一个知道位置的 child ，但父包装器没有。父包装器有另一个子 div，它是一个标签。

例如:

<div id="parent">
  <div id="child" style="position: absolute; top: 100px; left: 50px">
    <img src="icon.png" />
  </div>
  <span class="label">abcdefghijk</span>
</div>

当然正常情况下标签会变长，而且必须居中。

Answer 1

你不需要 position: absolute 来做到这一点。使用 display: inline-block 就可以了。
#parent 的宽度将随着标签的宽度而增长。

body {
  margin: 1em 0 0;
  padding: 0;
  text-align: center;
}

#parent {
  display: inline-block;
  border: 1px dotted blue;
  padding: 10px;
}

#child {
  text-align: center;
  font-size: 6em;
}

.icon {
  border: 1px solid red;
  color:red;
  display: inline-block;
  padding: 12px;
}

.label {
  display: inline-block;
  padding-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="parent">
  <div id="child" style="">
    <i class="fa fa-heartbeat fa3 icon"></i>
  </div>
  <span class="label">ABCDEFGHIJKLMNOPQRSTU</span>
</div>