Как центр значок вертикально

Question

Я прочитал много для решения рода проблемы, но я не найти решение

Я таблица как

<td class="thSorter ui-widget-header ui-corner-all ui-state-default" style="width: 100px; min-width: 100px; max-width: 100px;">Dte Naissance<i class="ui-icon ui-icon-carat-2-n-s"></i></td> 

и Css

.TFO thead tr td 
{ 
    text-align:center; 
} 

.TFO thead tr td .ui-icon 
{ 
    float: right; 
    margin-top:-8px; 
} 

Когда мой текст находится в 2 строках, это хорошо, как здесь, но если он находится на одной линии, он должен подняться.

см для получения дополнительной информации jsfiddle

Answer 1

Не всплывают ваш элемент. Используйте позиционирование вместо:

DEMO

tr td { 
    text-align: center; 
} 
tr td .ui-icon { 
    position: absolute; 
    top: 35%; 
    right: 5px; 
} 
tr.trheader { 
    height: 35px; 
    max-height: 35px; 
    min-height: 35px; 
} 
td { 
    border-style: solid; 
    border-width: 1px; 
    border-color: transparent; 
    padding-right: 5px; 
    padding-left: 5px; 
    position: relative; 
} 

<table class="ui-widget ui-widget-content ui-corner-top"> 
    <tr class="trheader"> 
    <td class="thSorter ui-widget-header ui-corner-all ui-state-default" style="width: 110px; min-width: 110px; max-width: 110px;">Dte Naissance<i class="ui-icon ui-icon-carat-2-n-s"></i> 

    </td> 
    <td class="thSorter ui-widget-header ui-corner-all ui-state-default" style="width: 100px; min-width: 100px; max-width: 100px;">Dte<i class="ui-icon ui-icon-carat-2-n-s"></i> 

    </td> 
    </tr> 
</table> 

---

Demo with simple animation effect

Answer 2

Я просто найти смотрите здесь jsfiddle

<table class="ui-widget ui-widget-content ui-corner-top"> 
    <tr> 
     <td class="thSorter ui-widget-header ui-corner-all ui-state-default" style="width: 110px; min-width: 110px; max-width: 110px;"> 

      <div style="display: table;"> 
       <div style="display: table-cell; height: 30px; vertical-align: middle;width:90%">Dte Naissance</div> 
       <div style="display: table-cell;vertical-align: middle;"><i class="ui-icon ui-icon-carat-2-n-s"></i></div> 
      </div> 
     </td> 
     <td class="thSorter ui-widget-header ui-corner-all ui-state-default" style="width: 100px; min-width: 100px; max-width: 100px;"> 
      <div style="display: table;"> 
       <div style="display: table-cell; height: 30px; vertical-align: middle;width:90%">Dte</div> 
       <div style="display: table-cell;vertical-align: middle;"><i class="ui-icon ui-icon-carat-2-n-s"></i></div> 
      </div> 
     </td> 
    </tr> 
</table> 
<style> 
    tr td 
    { 
     text-align: center; 
    } 

    tr.trheader 
    { 
     height: 35px; 
     max-height: 35px; 
     min-height: 35px; 
    } 

    td 
    { 
     border-style: solid; 
     border-width: 1px; 
     border-color: transparent; 
     padding-right: 5px; 
     padding-left: 5px; 
    } 
</style>