html - 并排居中文本和图像

Question

我遇到了一个 CSS 问题，我呼吁您提供专业知识来帮助我!

我正在尝试对齐文本和图像。文本和图像应垂直居中、左对齐并紧挨着彼此。这两个元素都应包含在宽度可变的包装 div 中。

下面是我到目前为止的代码:

<style>
  .cell {
    width: 150px;
    height: 200px;
    box-shadow: 0 0 0.5em #999;
    white-space: nowrap;
  }

  .text_element {
    height: 100%;
    display: inline-block;
    white-space: normal;
    float: left;
  }

  .tooltip_element {
    height: 100%;
    display: inline-block;
  }

</style>

<div class="cell">

  <div class="text_element"> This is some random, random text.</div>
  <div class="tooltip_element">
    <img src="http://www.sainsburysbank.co.uk/library/default/images/life-insurance/icon-tooltip.png"/>
  </div>

</div>

当包装内容为 500px 时，上面的代码会生成下一张图片:

在上面的图像中，元素正确地彼此相邻，但没有垂直对齐。

对于宽度200px，我们遇到了另一个问题:

这里我们在文本和图像之间得到了空白，这不应该存在，因为图像应该紧挨着文本。此外，图像元素现在位于 div 之外。

注意:

• 包装内容可以有不同的宽度

• 解决方案应适用于所有浏览器(无 flex 解决方案)

• 不用JS，只能用CSS

非常感谢您的帮助!

编辑:

文本应该左对齐!

Answer 1

好的，这是:

.cell {
  width: 210px;
  height: 200px;
  box-shadow: 0 0 0.5em #999;
  white-space: nowrap;
  padding-right: 30px;
}
.text_element {
  display: inline-block;
  white-space: normal;
  float: left;
  text-align: justify;
  position: relative;
}
.tooltip_element {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<div class="cell">
  <div class="text_element">This is some random, random text. Moar random text. And moar, moar random text...
    <div class="tooltip_element">
      <img src="http://www.sainsburysbank.co.uk/library/default/images/life-insurance/icon-tooltip.png" />
    </div>
  </div>
</div>

请注意，我在文本元素中包含了工具提示元素。所以我可以垂直对齐它们。如果他们必须是 sibling ，我需要将他们都包装在一个容器中，以便在没有 flex-box 的情况下垂直居中。

如果您更喜欢 jsFiddle，可以调整单元格宽度，here it is .