如何垂直居中图标

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

不要浮动你的元素。改为使用定位：

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>

如何垂直居中图标

How center icon vertically

css

jquery-ui