Question

我想在jquery-mobile应用程序中将可折叠的标题文本居中。

我的代码是：

<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优先考虑jquery-mobile的css：

.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

jquery-mobile的自定义CSS。中心可折叠标题

1 个答案: