要在HTML中將文字放在圖片中間,可以使用CSS的絕對定位和居中技巧。下面是一個示例:
在上面的示例中,首先創建一個相對定位的容器(.container
),然后在容器內部放置圖片和用于覆蓋在圖片上方的文字框(.text-overlay
)。通過設置容器為position: relative;
,并將文字框設置為position: absolute;
,可以將文字框相對于容器進行定位。利用top: 50%;
、left: 50%;
和transform: translate(-50%, -50%);
的組合,可以使文字框垂直和水平居中。
您可以根據需要調整文字框的樣式,例如背景顏色、字體大小等。同時,還可以根據實際情況設置圖片的最大寬度(.container img
)以及容器的顯示方式(.container
)。