css - 如何垂直居中图标

Question

我读了很多关于某种问题的解决方案，但我没有找到解决方案

我有这样的 table

<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 行时，就像这里一样好，但如果它是 1 行，那就太高了。

有关更多信息，请参阅 jsfiddle

Answer 1

不要 float 你的元素。改用定位:

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