Html 使用内联样式在相邻的图像上添加文本

我已经排列了一组大小相等的图像，它们按一定的宽度缩放。我是个新手，希望能得到一些帮助，帮助我弄清楚现在如何在每个图片上添加文本

const style1 = {  
  display: 'block'  
}

const style2 = {
  float: "center",  
  fontSize: '9pt',  
  textAlign: 'center',  
  width: '30%',  
  marginRight: '1.6666665%',  
  marginLeft: '1.6666665%',  
  marginTop: '1%',  
  marginBottom: '0.5em',  
}

---

我为您创建了一个示例：

HTML:

<div class="image">
  <img src="http://lorempixel.com/400/400/sports/2" alt="" />      
  <h2><span>Some Text</span></h2></div><br/>
</div>

<div class="image">
  <img src="http://lorempixel.com/400/400/food/5" alt="" />      
  <h2><span>Some Other Text</span></h2></div><br/>
</div>

---

您可以参考，我没有仔细查看您的css，但当我阅读您尝试执行的操作时，我最初的想法是使用position:relative和position:absolute组合将文本置于图像上方。

<div class="image">
  <img src="http://lorempixel.com/400/400/sports/2" alt="" />      
  <h2><span>Some Text</span></h2></div><br/>
</div>

<div class="image">
  <img src="http://lorempixel.com/400/400/food/5" alt="" />      
  <h2><span>Some Other Text</span></h2></div><br/>
</div>

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
  position: absolute; 
  top: 300px; 
  left: 0; 
  width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.4);
   padding: 10px; 
}