表格单元格的中心跨度

Question

我试图将俘虏居中放在表格中的图像下方。 我可以将其固定在单元格的底部或水平居中，但不能同时进行两个动作，是因为相对/绝对位置吗？

 <body> <style> #sum td{ position:relative; text-align:center !important; vertical-align: center; width:400px; } #sum tr{ height:280px; } #sum td span{ position:absolute; bottom:0; display:block; text-align:right; } </style> <content> <div> <ul> <table id="sum"> <tr> <td class="col-md-4"> <li><img class="pic"src="#"> <span>xxx </span> </li> </td> </tr> </table> </ul> </div> </content> </body> 

Answer 1

如果您只是尝试将文本置于图像下方，则无需绝对定位。 另外，您在表中混合了随机的ul和li元素，并且使用它的方式无效。

 <head> <style> #sum td{ position:relative; text-align:center !important; vertical-align: center; width:400px; } #sum tr{ height:280px; } #sum td span{ display:block; text-align:center; } </style> </head> <body> <content> <div> <table id="sum"> <tr> <td class="col-md-4"> <img class="pic" src="https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2_400x400.jpg"> <span>xxx</span> </td> </tr> </table> </div> </content> </body> 

如果要使用绝对定位，它将文本定位在图像上方，而不是图像下方。 为了使文本跨越其父对象的整个宽度，您需要添加position: relative; 到父级，则任意一个width: 100%; 或left: 0; right: 0; left: 0; right: 0; 到跨度。

 <head> <style> #sum td{ position:relative; text-align:center !important; vertical-align: center; width:400px; } #sum tr{ height:280px; } #sum td { position: relative; } #sum td span{ text-align:center; position: absolute; left: 0; right: 0; bottom: 0; } </style> </head> <body> <content> <div> <table id="sum"> <tr> <td class="col-md-4"> <img class="pic" src="https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2_400x400.jpg"> <span>xxx</span> </td> </tr> </table> </div> </content> </body>