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:

Bad Version

Here is what I'm looking for:

Desired Version

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

This site is not yet online. Let me know if you are in need of any other particular element of the code and I will be happy to provide it to you. :) — mattkgross, Mar 06 '14 at 08:34

score 5 · Accepted Answer · edited May 23 '17 at 11:44

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>

@Ruddy - no, the content is still center aligned, as per the request. — acarlon, Mar 06 '14 at 08:38
Oh, I misread the question. In that case yes that's what I would do. +1. — Ruddy, Mar 06 '14 at 08:40
Making the `table` have `position: relative;` caused the icon to display to the top right outside of the table. However, when I made each `td` relative, instead, the correct style was rendered - thank you for the help! — mattkgross, Mar 06 '14 at 08:50
@mattkgross - See my update. If you have multiple table cells then my single-cell answer would position relative to the table rather than the cell. I am surprised it worked for you when you set td to position relative, since td normally can't take position relative unless displayed as a block. Maybe it is something to do with using bootstrap? — acarlon, Mar 06 '14 at 09:50
I am guessing it is most likely a bootstrap issue. At least it is solved now, though. Thanks again! — mattkgross, Mar 06 '14 at 19:48

Vertically Align a Span within a TD

1 Answers1