gpt4 book ai didi

html - 表格单元格中的中心跨度

转载 作者:行者123 更新时间:2023-11-28 04:21:40 26 4
gpt4 key购买 nike

我正在尝试将俘虏置于表格中图像下方的中心位置。我可以将它固定在单元格的底部或水平居中但不能同时执行这两个操作。是因为相对/绝对位置吗?

<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>

最佳答案

如果您只是想让文字在图片下方居中,则无需绝对定位。此外,您有一个随机的 ulli 元素与表混合,并且您使用它的方式无效。

<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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com