Html 将文本放置在图像中间的最佳方法

将文本覆盖在图像的一半上。实现这一目标的最佳实践

创建一个类似这样的类，并在其中插入图像链接：

在图像之后创建一个类：

插入css

.imageContainer{
位置：相对位置；
文本对齐：居中；
颜色：白色；
}
.左下角{
位置：绝对位置；
底部：8px；
左：16px；
}
.左下角{
位置：绝对位置；
底部：8px；
左：16px；
}
.左上角{
位置：绝对位置；
顶部：8px；
左：16px；
}
.右上角{
位置：绝对位置；
顶部：8px；
右：16px；
}
.右下角{
位置：绝对位置；
底部：8px；
右：16px；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

此文本位于左下角
此文本位于左上角。
此文本位于右上角。
此文本位于右下角。
此文本居中。

您可以将图像绝对放置在左侧的60%，将文本从左侧的0%放置到80%（例如），方法是：

---

以下是一个工作片段：

.container{
位置：相对位置；
宽度：100%；
高度：200px；
}
.形象{
位置：绝对位置；
排名：0；
左：60%；
宽度：40%；
身高：100%；
}
.文本{
宽度：80%；
位置：绝对位置；
排名：0；
左：0；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。暂时性扭转要素。阿利奎姆·维塔·尤里西斯·麦格纳。普卢斯河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔河畔。埃蒂亚姆·波苏尔·康瓦利斯·埃尼姆（Etiam posuere convallis enim），是一位伟大的诗人。Vivamus调味品、justo id fringilla luctus、massa ante varius leo、非圣洁的选经，适用于每一个conubia nostra、每一个himenaeos的一级社会性塔西提（taciti Sociasqu）和利托拉（litora Tournt）。暂时的温文尔雅的自由生活。Mauris vulputate Elite ante，位于中间门ac.Quisque fringilla ipsum，在发酵前，在饮食中的不平等。Fusce feugiat，前帝王饮食元素，magna elit convallis magna，rutrum neque dui id odio。这是我的拿手好戏。这是一种自由的生活。不喝咖啡。

.image{
  position:absolute;
  left:60%;
  ...
}
.text{
  width:80%;
  ...
}