Question

这可能是一个愚蠢的问题，但我很难搞清楚这一点。我有一些动态内容可能会有所不同。在这之下，我有一排静态图像，但图像上附有动态文本。我想将文本附加到中心的div中，并且每当动态内容改变时，它将相应地下推该div，文本固定在中心。我还想要一个固定在右侧的文本。现在，我已经在中心手动设置了文本，但这显然不起作用，因为无论何时屏幕或内容发生变化，图像都会被按下，而不是文本。

https://jsfiddle.net/t1z4tn47/2/

＆＃13;

#text {
  position: absolute;
  right: 540px;
  top: 100px;
}

#number {
  position: absolute;
  right: 470px;
}

#wrapper {
  display: inline-block;
}

＆＃13;

<div id="somecontent">
  some dynamic content here, height will vary and always push the wrapper div below
</div>
<div id="wrapper">
  <img src="https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png" alt="">
  <span id="text">HELLO</span>
  <span id="number">#1</span>
</div>

<img src="http://www.callrail.com/wp-content/upload/2016/05/Yellow-200x200.jpg" alt="">

＆＃13;

Answer 1

设置文本位置后，可以使用translate transform http://www.w3schools.com/css/css3_2dtransforms.asp

＆＃13;

#wrapper{
  position: relative;
}
#text{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#number{
  position: absolute;
  top: 0;
  right: 0;
}

#wrapper{
  display:inline-block;
}

＆＃13;

Answer 2

编辑以匹配以下评论

请参阅小提琴https://jsfiddle.net/t1z4tn47/8/

我将position: relative;添加到包装器中，这将允许您将子元素RELATIVE的绝对定位更改为包装器。因此，如果您在顶部添加文本并且框向下移动，则数字和文本将随之移动。

#text{
  position:absolute;
  right: 50%;
  top: 50%;
  margin-top: -8px;
  margin-right: -26px; 
}

#number{
  position: absolute;
  right: 0;
  top: 0;
}

#wrapper{
  display:inline-block;
  position: relative;
}

HTML / CSS：如何使div内的文本自动居中

2 个答案: