Html 并排居中文本和图像

我遇到了一个CSS问题，我需要你的专业知识来帮助我

我正在尝试对齐文本和图像。文本和图像应该垂直居中，左对齐，并且彼此相邻。这两个元素都应该包含在包装器div中，包装器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>

.细胞{
宽度：150px；
高度：200px；
盒影：0.5em#999；
空白：nowrap；
}
.text_元素{
身高：100%；
显示：内联块；
空白：正常；
浮动：左；
}
.tooltip\u元素{
身高：100%；
显示：内联块；
}
这是一些随机的，随机的文本。

当包装内容为500px时，上述代码生成下一个图像：

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

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

在这里，我们得到文本和图像之间的空白，这不应该存在，因为图像应该正好位于文本旁边。此外，图像元素现在位于div之外

注意：

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

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

• 没有JS，只能使用CSS

非常感谢你的帮助

编辑：

---

文本应左对齐

您可以使用css表格

CSS

.cell {
  width: 100%;
  height: 200px;
  box-shadow: 0 0 0.5em #999;
  word-break:break-all;
}

.text_element {
  display: table-cell;
  vertical-align: middle;
}

.tooltip_element {
  display: table-cell;
  vertical-align: middle; 
}

好的，给你：

.cell{
宽度：210px；
高度：200px；
盒影：0.5em#999；
空白：nowrap；
右侧填充：30px；
}
.text_元素{
显示：内联块；
空白：正常；
浮动：左；
文本对齐：对齐；
位置：相对位置；
}
.tooltip\u元素{
位置：绝对位置；
左：100%；
最高：50%；
转化：translateY（-50%）；
}

这是一些随机的，随机的文本。摩尔随机文本。还有呜呜，呜呜的随机文字。。。

是否希望图像始终位于单元格内？是的，文本和图像都应位于单元格内。@Riko检查我的答案，我很确定它完全符合您的要求，无需使用脚本。您在

显示：表中遗漏了分号

虽然这很好，但它不会将图像与文本对齐，当单元格大小缩小时。如下图所示：使用

break all

触感良好。但我打赌这是不允许的。他将再次更改规则。我喜欢你的解决方案，但是文本应该左对齐。我忘了提到这一点。如果它是左对齐的，文本和图像之间的空间是不可控的，它取决于下一行中下一个单词的长度（字母）。即使使用javascript，您所要求的也很困难。这不是一个合理的要求，伊姆霍。我理解，但这是我们需要的解决方案。我已经实现了几个解决方案。让我们单独解决这个问题。问：对于一个有两行且左对齐的文本，在技术上是否可以计算右边距和距此边距最近的字母之间的距离？A:没有。我还没有找到使用javascript的解决方案，更不用说只使用CSS了。我很确定CSS还没有满足您的要求。谢谢您的解释。