更改可折叠标题的文本位置（Jquery Mobile Collapsible）答案

【问题标题】：Change the Text Position of the Collapsible Header (Jquery Mobile Collapsible)更改可折叠标题的文本位置（Jquery Mobile Collapsible）
【发布时间】：2016-10-26 10:53:40
【问题描述】：

我正在使用 jQueryMobile 为移动设备创建一个网站。我有一个简单的 Collapsible，如下所示：

<div data-role="collapsible">
    <h3>Section</h3>
    <p>I am the Content how are you?</p>
</div>

我设法更改了标题的高度，但更改后标题的文本不再与可折叠图标对齐。

有没有办法改变 HeaderText 的位置水平使其与图标对齐？

因为我可以使用text-align: center 垂直更改位置

这是我迄今为止尝试过的FIDDLE。

【问题讨论】：

将文本（相同元素）的行高设置为与高度相同的值。 10vh。
谢谢你的诀窍，你为什么不把这个作为答案发布？
也许这对你来说也很有趣：howtocenterincss.com

标签： jquery css html jquery-mobile

【解决方案1】：

您可以使用line-height 属性将标题文本垂直居中：

.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
    line-height: 10vh;
}

如果您将元素的行高设置为与元素高度相同，则文本将垂直居中。在这种特定情况下，这将是一个很好的解决方案，因为您只有一行文本（一个单词）。

.ui-collapsible .ui-btn {
  height: 10vh !important;
}

.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
  color: red !important;
  /*margin-top:100px !important;*/
  line-height: 10vh;
}

.ui-collapsible-heading .ui-btn .ui-btn-text {
  color: red !important;
  /*top: 10% !important;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jsfiddle.net/0p92aec2/1/%22https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="page">
  <div data-role="content">
    <div data-role="collapsible">
      <h3>Section</h3>
      <p>I am the Content how are you?</p>
    </div>
  </div>
</div>

【讨论】：