垂直对齐TD内的跨度

Question

我正在使用引导程序的表格列的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

单细胞

一种方法是使跨度位置绝对.看到这个小提琴.

变化是(高度和宽度仅用于演示):

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.但是,这并不简单.请看这里的方法来做到这一点.基本上它涉及将另一个div放入填充td的td中,然后将其用于该位置.此外,您希望保留中心文本.有关垂直居中的讨论,请参见此处.另一种方法是将表格单元格设置为位置block.但是,如果这样做,则会丢失文本的垂直居中.一个很好的解决方案是使用转换(注意mdn上支持的浏览器).

这个小提琴显示它适用于多个表格单元格.基本上: -

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