css - Vertically Align a Span within a TD -

i running troubles css formatting of table columns bootstrap. normal td looks 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 edit-icon class looking like:

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

ideally, content in cell should centered vertically , icon should in top right corner. i've tried hours, no avail, figure out how align 1 element middle vertically , 1 element top vertically in same cell.

to further display problem, here current look:

here i'm looking for:

any how solve css conundrum appreciated!

single cell

one way make span position absolute. see this fiddle.

the changes (the height , width 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 relative, position span base absolute position from.

multiple cells

now, problem doesn't work when have multiple table cells because image using table offset point. so, need make position relative td. however, not simple. see here way this. involves putting div inside td fills td , using position. also, want preserve center text. see here discussion on centering vertically. approach set table cell position block. however, if lose vertical centering of text. nice solution use transform (note supported browsers on mdn).

this fiddle shows working multiple table cells. basically: -

• td display:block means can relative point.
• .content wraps text needs centered vertically.
• transform shifts content half height center of td, in 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 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 more content</p>                         </div>         </td>     </tr> </table>