css - 在 TD 内垂直对齐 Span

Question

我在使用 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 难题，我们将不胜感激!

Answer 1

单细胞

实现此目的的一种方法是使跨度位置成为绝对位置。参见 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>