如何在此图像上显示文本

Question

如何在CSS中将文本居中放置在图像上？

我在这里附加代码，我是CSS中的新手

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>


<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

Answer 1

How about something like this:

Its done by using position:absolute and z-index to place the text over the image.


  
 
  
  
 
   
 
    
    #container {
      height: 400px;
      width: 400px;
      position: relative;
    }
    #image {
      position: absolute;
      left: 0;
      top: 0;
    }
    #text {
      z-index: 100;
      position: absolute;
      color: white;
      font-size: 24px;
      font-weight: bold;
      left: 150px;
      top: 350px;
    }
 
    
    <div id="container">
      <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
      <p id="text">
        Hello World!
      </p>
    </div>
 
   
 
  

Answer 2

您可以使用如下所示的内容：

JS小提琴

 .image { position: relative; } img { width: 100%; height: 200px; } .text { position: absolute; bottom:0; left: 0; width: 100%; } .text h2 { text-align: center; color: #FFF; } 

 <div class="image"> <img src="https://cdn.photographylife.com/wp-content/uploads/2015/10/Wadi-Rum-5-650x434.jpg" alt="My Image" /> <div class="text"> <h2>Some text</h2> </div> </div>