Я хочу сосредоточить текст заголовка сбрасываемого в 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?
Складной текст заголовка фактически находится в теге привязки в теге заголовка. Итак, ваш css должен быть:
.custom-centercollheader a {
text-align: center !important;
padding-right: 2.5em !important;
}
Я добавил правильное заполнение, потому что кнопка значка расширения слева перемещает якорь от центра. Предоставляя одинаковое дополнение справа, текст будет центрирован и выровнен с кнопками под ним.
id
и использовать его вместо этого (это может работать через специфику).