html - 使用 CSS 将包含动态文本长度的对象放置在其父对象之外

Question

我希望这不是一个愚蠢的问题，但我已经在这个问题上纠结了很长时间，因此决定寻求答案。

我正在尝试以页面为中心实现以下目标:

[ [动态变化的文本] [img] [其他文本] ]

左侧文本的长度不应影响整个 block 的居中特性。

无论周围有什么文字，图像都应位于屏幕中央。

我尝试在左侧文本上使用负翻译，这实现了效果，但在文本字符串改变长度时不会缩放。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.wrapper {
  border: 1px solid green;
  left: 50%;
  position: absolute;
}

.long-text {
  border: 1px solid yellow;
  display: inline-block;
  transform: translateX(-100%);
}

.image-block {
  border: 1px solid blue;
  display: inline-block;
  transform: translatex(-100%);
}

<div class="wrapper">
  <span class="long-text">Longer text goes in here</span>
  <div class="image-block">
    <img src="http://fakeimg.pl/30x30" alt="" />  
    <span>Shorter text</span>
  </div>
</div>

有什么想法吗？

Answer 1

通过设置 flex:1，可以使用 Flexbox 轻松实现图像左侧和右侧 block 的宽度相等:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.wrapper {
  border: 1px solid green;
  display: flex;
}
.wrapper > span {
   flex: 1;
}

.long-text {
  border: 1px solid yellow;
  text-align: right;
}

.image-block {
  border: 1px solid blue;
  display: inline-block;
}

<div class="wrapper">
  <span class="long-text">Longer text goes in here</span>
  <div class="image-block">
    <img src="http://fakeimg.pl/30x30" alt="" /> 
  </div>
  <span>Shorter text</span>
</div>

是你要找的吗？