关系图使用富文本放图片和文字。文字在图片中间
时间: 2023-12-14 22:37:04 浏览: 176
您可以使用HTML标签来实现富文本显示图片和文字。以下是一种可能的实现方法:
```
<div style="position: relative; display: inline-block;">
<img src="your-image-url" style="max-width: 100%; height: auto;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
<span style="color: white; font-size: 20px;">Your text here</span>
</div>
</div>
```
这段代码将创建一个 `div` 元素,其中包含一个图片和一个居中的文本。 `position: relative; display: inline-block;` 属性将使 `div` 元素作为行内元素显示,并相对于其父容器进行定位。图片使用 `max-width: 100%; height: auto;` 属性来自适应容器大小。文本使用 `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;` 属性来居中显示,并相对于图片进行定位。
您需要将 `your-image-url` 和 `Your text here` 替换为您自己的图片 URL 和文本内容。您还可以使用其他样式属性来自定义显示效果。
阅读全文