css html 在div中使得图片在右文字在左居中

要在HTML和CSS中实现图片在右侧、文字在左侧并且整体内容居中对齐，你可以这样做：

首先，在HTML中创建一个包含图片和文本的`<div>`元素：

<div class="container">
  <img src="your-image-url" alt="Your Image Description" class="image-right">
  <p class="text-left">这是你的文字内容</p>
</div>

然后，为`.container`, `.image-right`, 和 `.text-left` 类添加相应的CSS样式：

.container {
  display: flex; /* 创建flex布局 */
  justify-content: center; /* 文字水平居中 */
}

.image-right {
  margin-left: auto; /* 图片向右浮动 */
  max-width: 100%; /* 图片自适应容器宽度 */
  height: auto;
}

.text-left {
  text-align: left; /* 文本左对齐 */
  margin-right: 1em; /* 给文字一些空间 */
}

在这个例子中，`.container`使用了Flexbox布局，它会让内部元素自动调整空间分配以达到居中的效果。`.image-right`通过设置`margin-left: auto`让图片向右浮动，并设置了最大宽度使其随着容器大小变化。`.text-left`则将文本的对齐方式设为左对齐，并给文字留出一点间距。