要在HTML中将文字放在图片中间,可以使用CSS的绝对定位和居中技巧。下面是一个示例:
在上面的示例中,首先创建一个相对定位的容器(.container
),然后在容器内部放置图片和用于覆盖在图片上方的文字框(.text-overlay
)。通过设置容器为position: relative;
,并将文字框设置为position: absolute;
,可以将文字框相对于容器进行定位。利用top: 50%;
、left: 50%;
和transform: translate(-50%, -50%);
的组合,可以使文字框垂直和水平居中。
您可以根据需要调整文字框的样式,例如背景颜色、字体大小等。同时,还可以根据实际情况设置图片的最大宽度(.container img
)以及容器的显示方式(.container
)。