Question

我有一个知道职位的孩子，但父包装却没有。父包装器有另一个子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>

Answer 2

我找到了一个解决方案，但我使用了javascript的技巧，只是我只想用CSS制作它:(。

<html>
    <head>
    <title>test000</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>
    <body>
        <div id="chincheta">
            <img id="image" src="tux.png">
            <div id="label">
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>
        </div>
    </body>
    <style type="text/css">
        #chincheta
        {
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            if ($("#chincheta").width() > $("#image").width()) {
                dif_width = $("#chincheta").width() - $("#image").width();

                x = $("#chincheta").offset()['left'];

                x = x - (dif_width / 2)

                $("#chincheta")
                    .css("left", x + "px")
                    .css("text-align", "center");
            }
        });
    </script>
</html>

来自子div的父div的位置

2 个答案: