Пользовательский CSS для jquery-mobile. Center collapsible header

Question

Я хочу центрировать текст заголовка разборного в jQuery-мобильном приложении.

Мой код:

<div data-role="content"> 
     <ul data-role="listview" id="sortingOptionsList"> 

     <li><div data-role="collapsible"> 
      <h3 class="custom-centercollheader">Editar</h3> <-- IMPORTANT 


      <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> 
      </div> 
     </li> 
     <li><input type="button" value="Crear Hijo"></li> 
     <li><input type="button" value="Eliminar"></li> 
     </ul> 
    </div> 

У меня есть ссылка на файл custom.css, который я создал, где я есть:

.custom-centercollheader { 
    text-align: center !important; 
} 

Однако, когда я открываю страницу, то CSS отдать предпочтение CSS в Jquery-мобильный:

.ui-collapsible-heading .ui-btn { 
text-align: left; 

Как я могу отдать предпочтение моей пользовательских CSS ??

Answer 1

Складной текст заголовка фактически находится в теге привязки внутри тега заголовка. Итак, ваш css должен быть:

.custom-centercollheader a { 
    text-align: center !important; 
    padding-right: 2.5em !important; 
} 

Я добавил правую обивку, потому что кнопка значка развернуть слева перемещает якорь от центра. Предоставляя одинаковое дополнение справа, текст будет центрирован и выровнен с кнопками под ним.

DEMO