Vertically Align a Span within a TD

Question

I am running into some troubles with CSS formatting of table columns with bootstrap. A normal td looks like this:

<td style="vertical-align: middle; font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil" style="vertical-align: top !important;"></span>
Content
</td>

With the edit-icon class looking like:

.edit-icon {
    float: right;
    padding-top: 3px;
    padding-right: 3px;
}

Ideally, the content in the cell should be centered vertically and the icon should be in the top right corner. I've tried for hours, but to no avail, to figure out how to align one element to the middle vertically and one element to the top vertically in the same cell.

To help further display the problem, here is the current look:

Here is what I'm looking for:

Any help with how to solve this CSS conundrum would be greatly appreciated!

Answer 1

Single cell

One way to do this is to make the span position absolute. See this fiddle.

The changes are (the height and width are just for demonstration):

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> 

The table position is relative, so that this is the position that the span will base its absolute position from.

Multiple Cells

Now, the only problem with that is that it doesn't work so well when you have multiple table cells because the image will always be using the table for the offset point. So, you need to make the position relative to the td. However, this is not simple. See here for a way to do this. Essentially it involves putting another div inside the td that fills the td and then using that for the position. Also, you want to preserve center text. See here for a discussion on centering vertically. Another approach is to set the table cell to position to block. However, if you do that then you lose the vertical centering of the text. A nice solution is to use a transform (note the supported browsers on mdn).

This fiddle shows it working for multiple table cells. Basically: -

• td display:block means that it can be the relative point.
• .content wraps the text that needs to be centered vertically.
• transform shifts the content up by half its height from the center of the td, so it is in the middle.

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>