html文字怎么放在图片上面右居中

HTML中将文字放置在图片上方并右对齐，你可以使用`<div>`元素配合CSS来实现这个效果。首先，创建一个包含图片和文本的`<div>`容器，并设置其`position`属性为`relative`，然后将文字的`position`设置为`absolute`，使其相对于`<div>`定位。下面是一个示例： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <style> .container { position: relative; width: 300px; /* 你可以根据需要调整宽度 */ height: 200px; background-color: #f8f9fa; /* 图片背景色，这里仅作示范 */ } .text-on-image { position: absolute; top: 50%; /* 文本位置在图片中心 */ left: 50%; transform: translate(-50%, -50%); /* 文本左上角对准图片中心 */ color: white; /* 文字颜色 */ font-size: 16px; /* 字体大小，自定 */ } </style> </head> <body> <div class="container"> <img src="your_image_url.jpg" alt="图片描述">  <p class="text-on-image">这是一段文字</p> </div> </body> </html> ``` 在这个例子中，你需要替换`src="your_image_url.jpg"`为你实际的图片链接。`transform: translate(-50%, -50%)`用于保证文本居中对齐。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通