Пользовательский CSS для jquery-mobile. Центр складной заголовок

0

Я хочу сосредоточить текст заголовка сбрасываемого в 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-mobile:

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

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

  • 0
    в зависимости от того, как загружен CSS, ваш может быть перезаписан. Можете ли вы настроить скрипку, демонстрирующую проблему? Кроме того, пытались ли вы дать этому элементу id и использовать его вместо этого (это может работать через специфику).
  • 0
    Ссылка или jsfiddle, пожалуйста
Теги:
jquery-mobile

1 ответ

2

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

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

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

DEMO

Ещё вопросы

Сообщество Overcoder
Наверх
Меню