Div开头的图标/图像

Question

我正在尝试将一个 17x17 像素的 png 图像放在居中的div 文本的开头，如下所示：

   [img] text text
text text text text text
text text text text text

<div style="text-align: center; height: 45px; width: 200px">
        <img src="icon" />
        <div>
            Some longer text.
        </div>
</div>

"困难"：文本必须保留在div 中，并且div 不得包含除文本以外的任何内容。并且div 还必须保持div，或者至少必须具有高度属性。

我尝试了很多 css，但它从来没有解决我需要它的方式。谢谢！

编辑：div 中的文本不一定很长。也可以只是一个词。

Answer 1

您可以使用

伪元素::before在div 中显示图像：

#myDiv::before {
    content: url('image.png');
}

这是一个工作的小提琴。

Answer 2

我认为你需要一些类似的东西：

• 使图标和标题居中的标题
• 包含其余文本
的部分

这可以通过一些柔性盒线轻松完成。大致如下：

 <header class="center-text">
  <img src="https://forum.starmen.net/include/images/smilies/cool3.png" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, eum, debitis earum dignissimos nobis quos, nulla voluptates temporibus voluptatum ad repellat, nam dicta. Recusandae
  ea quasi eligendi, nulla labore molestias.
</header>
<section>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint
  voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor
  ut deleniti, est provident quis expedita nostrum ipsum sunt maiores obcaecati esse repellat tempore sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis sint voluptatem, id fuga adipisci dolor ut deleniti, est provident quis expedita
  nostrum ipsum sunt maiores obcaecati esse repellat tempore sed.
</section>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.center-text {
  display: flex;
  justify-content: center;
}
</style>