本文介绍了将文本定位在图像上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有这张图片：但我想在中间放置文本如下：But i want to place text in the middle like this:我该如何实现？我想在html中执行此操作，因此我将使用< div> 或< span>I would like to do this in html, so I would use a <div> or a <span>推荐答案 使用伪元素 可以使用 :: before 和 :: after 伪元素包含元素。对于instnace，假设我们开始这样：Using Pseudo ElementsThe above could be created using the ::before and ::after pseudoelements of the containing element. For instnace, suppose we started with this:<h1>Keep Calm and Stack Overflow</h1>我们可以定位两个伪元素，设置它们的尺寸和背景图片，正在寻找以上。We could target the two pseudo elements, set their dimensions and background images, and get the same effect you are seeking above.h1::before, h1::after { content: ""; display: block; height: 3em; background: url('ribbon.png') center center;}上面是你可能写的一个例子。如需更完整的演示，请参阅这个小提琴。The above is a mere example of what you may write. For a fuller demo, please see this fiddle. >创建一个div，即图片的尺寸。然后把你的文本内。在文本上使用边距/填充以使其垂直居中，并为其CSS设置 text-align 为center。Create a div that is the dimensions of your image. Then place your text inside. Use margins/padding on your text to get it vertically-centered, and set text-align to "center" for its CSS..imgBox { width: 300px; height: 100px; background-image: url('bg.jpg');}.imgText { text-align: center; margin: 0; padding: 25px 0 0 0;}<div class="imgBox"> <p class="imgText">Hello World</p></div> 这篇关于将文本定位在图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
