如何将图像与表格中的文本对齐? (jquery datatable排序图像,表头中有文本)

时间:2013-06-27 13:44:15

标签: css css3

我正在使用jquery DataTable插件,我有html表和表头文本,并且要排序的图像没有对齐。

外观如何

http://i.imgur.com/3uByUmZ.png (我希望箭头和文字水平放在同一行)。怎么做?

我已经在jsfiddle上传了以下代码http://jsfiddle.net/icyborg7/9DTcT/

HTML代码

<th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="contacts_table" rowspan="1" colspan="1" style="width: 73.7667px;" aria-sort="ascending" aria-label="S.No.: activate to sort column descending">

<div class="DataTables_sort_wrapper">S.No.<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>

</div>
</th>

CSS代码

.ui-state-default .ui-icon {
    background-image: url("/assets_dev/jquery-ui/ui-icons_888888_256x240.png");
}
.ui-icon-triangle-1-n {
    background-position: 0 -16px;
}
.ui-icon, .ui-widget-content .ui-icon {
    background-image: url("/assets_dev/jquery-ui/ui-icons_222222_256x240.png");
}
.ui-icon {
    height: 16px;
    width: 16px;
}
.ui-icon {
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    text-indent: -99999px;
}
* {
    outline: medium none !important;
}

1 个答案:

答案 0 :(得分:1)

你去:

http://jsfiddle.net/9DTcT/2/

.ui-icon {

display: inline-block;

}

希望这就是你要找的东西