我在使用bootstrap的表格列的CSS格式化时遇到了一些麻烦。正常td
看起来像这样:
<td style="vertical-align: middle; font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil" style="vertical-align: top !important;"></span>
Content
</td>
edit-icon
类看起来像:
.edit-icon {
float: right;
padding-top: 3px;
padding-right: 3px;
}
理想情况下,单元格中的内容应垂直居中,图标应位于右上角。我已经尝试了好几个小时,但无济于事,弄清楚如何将一个元素垂直对齐到中间,一个元素在同一个单元格中垂直对齐。
为了帮助进一步显示问题,这是当前的外观:
以下是我要找的内容:
非常感谢任何有关如何解决这个CSS难题的帮助!
答案 0 :(得分:5)
单格
这样做的一种方法是使跨度位置绝对。请参阅 this fiddle 。
更改是(高度和宽度仅用于演示):
CSS:
table
{
position:relative;
}
td
{
height:300px;
width:300px;
background-color:grey;
}
span
{
top:5px;
right:5px;
position:absolute;
height:100px;
width:100px;
background-color:red;
}
HTML:
<table>
<td style="vertical-align: middle; font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil"> </span>
Content
</td>
</table>
表位置是相对的,因此这是跨度将基于其绝对位置的位置。
多个细胞
现在,唯一的问题是当你有多个表格单元格时它不能很好地工作,因为图像将始终使用表格作为偏移点。因此,您需要设置相对于td
的位置。但是,这并不简单。有关执行此操作的方法,请参阅here。基本上它涉及将另一个div放入填充td的td中,然后将其用于该位置。此外,您希望保留中心文本。有关垂直居中的讨论,请参阅here。另一种方法是将表格单元格设置为block
。但是,如果这样做,则会丢失文本的垂直居中。一个很好的解决方案是使用转换(请注意mdn上支持的浏览器)。
This fiddle 显示它适用于多个表格单元格。基本上: -
td
display:block
表示它可以是相对点。 .content
包装需要垂直居中的文字。 transform
将内容从td
的中心向上移动一半高度,因此位于中间位置。CSS:
td
{
position:relative;
display:block;
height:300px;
width:300px;
background-color:grey;
}
span
{
position:absolute;
top:5px;
right:5px;
height:100px;
width:100px;
background-color:red;
}
.content
{
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
HTML:
<table>
<tr>
<td style="font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil"> </span>
<div class="content">
<p>Content</p>
<p>More content</p>
<p>Even more content</p>
<p>So much more content</p>
</div>
</td>
</tr>
<tr>
<td style="font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil"> </span>
<div class="content">
<p>Content</p>
<p>More content</p>
<p>Even more content</p>
<p>So much more content</p>
</div>
</td>
</tr>
</table>