центрировать текст заголовка в jqGrid, удерживая кнопку открытия / закрытия в положении?

Question

Я хотел бы центрировать текст заголовка на jqGrid, не путая изображение открытия / закрытия. Но я смог получить только и текст и кнопку с изображением кнопки открытия / закрытия по центру. Я был бы признателен за несколько советов о том, как получить текст по центру , сохраняя при этом якорное изображение в положении .

Вот разметка, которую показывает Chrome's Inspector:

<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
   <a role="link" href="javascript:void(0)"
      class="ui-jqgrid-titlebar-close HeaderButton" style="right: 0px;">       
       <span class="ui-icon ui-icon-circle-triangle-n"></span>
   </a>
   <span class="ui-jqgrid-title">Titles</span>
 </div>

Спасибо

Answer 1

Попробуйте со следующим

jQuery(".ui-jqgrid-title").replaceWith('<div style="text-align: center;"><span>' +
        jQuery(".ui-jqgrid-title").text() + '</span></div>');

или

jQuery(".ui-jqgrid-title").replaceWith(
    '<div style="text-align: center; padding: .3em .2em .2em .3em;"><span>' +
    jQuery(".ui-jqgrid-title").text() + '</span></div>');

ОБНОВЛЕНО : Я должен немного исправить свое решение: 1) разрешить setCaption метод продолжить работу; 2) работать корректно, если на странице больше одного jqGrid:

var captionDiv = jQuery("#list")[0].grid.cDiv;
var titleSpan = jQuery(".ui-jqgrid-title",captionDiv);
titleSpan.css ("float", "none");
titleSpan.parent().css ("text-align", "center");

В коде «list» указан идентификатор <table> элемента сетки. DOM-элемент jqGrid (jQuery("#list")[0]) расширяется свойством grid, которое имеет в качестве свойств DOM-элементы трех важных компонентов jqGrid (cDiv - заголовок, hDiv - заголовки таблицы и bDiv - тело таблицы). Мы используем .grid.cDiv, чтобы получить элемент DOM заголовка (заголовок сетки) самым быстрым способом. Затем мы даем span элемент заголовка и перезаписываем стиль "float: left" класса "ui-jqgrid-title", который, вероятно, сделал вас самой большой проблемой. В конце мы устанавливаем дополнительный стиль родительского элемента div на "text-align: center", чтобы завершить всю работу.