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

我想要在jquery-mobile应用程序中将可折叠标题文本居中。jquery-mobile的自定义CSS。中心可折叠标题

我的代码是：

<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？

来源

2014-02-19 Jack Casas

取决于CSS如何加载你可能会被覆盖。你能设置一个小提琴来展示这个问题吗？另外，你有没有尝试给这个元素一个'id'，然后用它来代替（它可能通过特殊性工作）。 – badAdviceGuy

请链接或jsfiddle –

可折叠标题文本实际上位于标题标签内的一个定位标记中。所以你的CSS应该是：

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

我添加了正确的填充，因为左侧的扩展图标按钮将锚点偏离中心。通过在右侧提供相同的填充，文本将居中并与其下面的按钮对齐。

DEMO

来源

2014-02-19 20:10:57 ezanker

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

回答

相关问题