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行时，它就像在这里一样好，但是如果它在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>

中心图标如何垂直

2 个答案: