Html 使文本位于图像顶部

我有一个网格的图像是3x3。 我希望能够做到的是让文本位于每个图像的正上方，但我似乎不知道如何做到这一点

我的CSS

 body{background-color:black;}

ul#grid {
  list-style: none;
  width: 1180px;
  margin:0 auto;
  overflow:hidden;
   }

#grid li {
  float: left;
  margin: 0 10px 70px 0px;
  display:inline;
  position:relative;
   }

#grid li img {
  padding: 15px; margin: 0;
  width: 339px;
  height: 211px;
  position:relative;
   }

HTML

<div class="portfolio">
  <ul id="grid">   
    <li><a href="#"><img src="1.jpg"></a></li>
    <li><a href="#"><img src="2.jpg"></a></li>
    <li><a href="#"><img src="3.jpg"></a></li>
    <li><a href="#"><img src="4.jpg"></a></li>
    <li><a href="#"><img src="5.jpg"></a></li>
    <li><a href="#"><img src="6.jpg"></a></li>
    <li><a href="#"><img src="7.jpg"></a></li>
    <li><a href="#"><img src="8.jpg"></a></li>
    <li><a href="#"><img src="9.jpg"></a></li>
     </ul></div>

我想你的意思是：

（编辑小提琴：玩得很开心：）

#网格li span{
显示：块；
底部：200px；
位置：相对位置；
宽度：370px；
左边距：20px；
}

我想你的意思是：

（编辑小提琴：玩得很开心：）

#网格li span{
显示：块；
底部：200px；
位置：相对位置；
宽度：370px；
左边距：20px；
}

提示：

ul#grid

是冗余的，会导致在DOM树上进行一些不必要的搜索。因为每个ID只能（而且应该）使用一次，所以在提供ID时不需要提供不太具体的选择器。文本节点在哪里，图像在哪里（在JSFIDLE中）？这不是很优雅，但像这样：（如果这是您想要的…）对于您的问题：我将每个图像包装在一个div中，然后将文本放在该主div中的div/span/段落中，并将该文本置于高于图像的位置。如果所有图像大小相同，或者文本需要在所有图像上位于同一位置，则给出包装div

位置：相对

和文本

位置：绝对

，然后使用上/左/下/右来定位文本提示：

ul#grid

是冗余的，会导致在DOM树上进行一些不必要的搜索。因为每个ID只能（而且应该）使用一次，所以在提供ID时不需要提供不太具体的选择器。文本节点在哪里，图像在哪里（在JSFIDLE中）？这不是很优雅，但像这样：（如果这是您想要的…）对于您的问题：我将每个图像包装在一个div中，然后将文本放在该主div中的div/span/段落中，并将该文本置于高于图像的位置。如果所有图像大小相同，或者文本需要在所有图像上位于同一位置，请给出包装div

位置：相对

和文本

位置：绝对

，然后使用上/左/下/右来定位文本Love the snoop lion psumlove the snoop lion psum

#grid li span {
    display:block;
    bottom:200px;
    position:relative;
    width:370px;
    margin-left:20px;
}

<div class="portfolio">
    <ul id="grid">
        <li><a href="#"><img src="1.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="2.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="3.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="4.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="5.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="6.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="7.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="8.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
        <li><a href="#"><img src="9.jpg" /><span>Lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>
        </li>
    </ul>
</div>