我试图将俘虏居中放在表格中的图像下方。我可以将其固定在单元格的底部或水平居中，但不能同时进行两个动作，是因为相对/绝对位置吗？
<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>最佳答案
如果您只是试图将文本置于图像下方，则无需绝对定位。此外，您在表中混入了随机的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;。<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>关于html - 表格单元格的中心跨度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42178813/