Question

我试图将text div置于具有box的{{1}} div之上。我尝试在文本div上使用inline block。但是当浏览器屏幕缩小或扩展时，position: absolute div的定位会变得混乱。如何解决这个问题？

＆＃13;

text

＆＃13;

.mainDiv {
  margin: auto;
  width: 100%;
  padding: 10px;
  left: 300px;
  text-align: center;
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.text {
  background-color: blue;
  position: absolute;
  top: 70%;
  left: 45%;
}

＆＃13;

Answer 1

我假设您使用内联块将.box置于.main-div内。从技术上讲，使用您当前的html结构，您无法将.text元素置于.box元素的中心位置，但您可以将其置于.main-div的中心位置，这与您的基本相同示例

我首先将position: relative添加到.main-div。绝对定位的元素基于其最近的具有定位上下文的祖先而定位。设置此方法的最简单方法是添加position: relative。

然后使用.text元素，您可以调整为：

.text {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50% );
}

这是有效的，因为top和left将顶部和左侧元素放置在其父级的顶部和左侧。因此，.text的顶部将在.main-div的50％开始，同样在左侧开始。这会使你的文字太远而且偏向左边。

transform: translate值的工作方式不同 - 它们基于元素本身的大小。因此-50%会将元素移回其宽度或高度的一半。通过在宽度和高度上设置它，我们移动.text，使其顶部和左边不是50％，而是它的中心位于50％。

＆＃13;

.mainDiv {
  position: relative; /* added to make .text align relative to this, not the document */
  margin: auto;
  width: 100%;
  padding: 10px;
  /* left: 300px; (I removed this for demo purposes, but if you need it you can add it back in) */
  text-align: center;
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.text {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50% ); /*pull the text left and up 50% of the text's size*/
}

＆＃13;

<div class="mainDiv">
  <div class="box"></div>
  <div class="text">text</div>
</div>

＆＃13;

Answer 2

文本的标记应首先写在框中。然后，您可以尝试使用block代替inline-block，然后将文字宽度设置为100％，显示block和'margin：0 auto'。另外，如果可以的话，可以考虑使用适当的语义标签而不是div。此外，我怀疑top和left规则导致文本无法正确对齐。您不再需要position:absolute。

Answer 3

如果您愿意，可以将蓝色div设为红色div的孩子，这样蓝色div将始终相对于红色div。我还将position:relative添加到红色div，并将transform:translate添加到蓝色div。

如果我没弄错的话，这也是反应灵敏的，所以请尝试缩小浏览器。

.mainDiv {
  margin: auto;
  width: 100%;
  padding: 10px;
  left: 300px;
  text-align: center;
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
  position:relative;
}

.text {
  background-color: blue;
  position: absolute;
  left: 50%;
  transform:translate(-50%, -100%);
}

<div class="mainDiv">
  <div class="box">
    <div class="text">text</div>
  </div>
</div>

Answer 4

.mainDiv {
text-align: center;
}

.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 19px;
}

.text {
  background-color: blue;
  position: absolute;
  margin: -19px 0 0 36px;
}

<div class="mainDiv">
  <div class="box">
  <div class="text">text</div>
</div>
</div>

如何将具有内联块

4 个答案: