我正在使用 jQueryMobile 创建一个适用于移动设备的网站。我有一个简单的 Collapsible,看起来像这样:
<div data-role="collapsible">
<h3>Section</h3>
<p>I am the Content how are you?</p>
</div>
我设法更改了标题的高度,但更改后标题的文本不再与可折叠图标对齐。
有没有办法水平更改 HeaderText 位置,使其与图标对齐?
因为我可以使用 text-align: center
垂直更改位置,这是 FIDDLE到目前为止我已经尝试过了。
最佳答案
您可以使用 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>
关于jquery - 更改可折叠标题的文本位置(Jquery Mobile 可折叠),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40260379/