一段时间以来，我一直在努力解决这个问题，但我似乎无法让它发挥作用。我想要的只是在列表项的中间添加文本(参见代码)但是它会创建一个额外的行并使行更大。我尝试使用标签，但它不起作用。如何在不更改行大小的情况下添加要居中的文本？
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
.ui-icon-myicon:after {
background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
}
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
</style>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" >
<li data-icon="myicon"><a href="#"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Center this text</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
</html>
最佳答案
有比添加 span 更好的解决方案。复制用于图标的 jQuery Mobile 按钮的 CSS。对它们进行您想要的更改。当然，将自定义类添加到a 标签。
看到它工作 here .
<li>
<a href="#" class="ui-icon-myicon">Center Text</a>
</li>
jQuery Mobile 使用 :after，对左侧图标使用 :before。
.ui-icon-myicon:before {
content:"";
left: .5625em;
position: absolute;
display: block;
width: 22px;
height: 22px;
background-color: #666;
background-color: rgba(0, 0, 0, .3);
background-position: center center;
background-repeat: no-repeat;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url("http://forum.librecad.org/images/gear.png");
}
要使文本居中，请遵循 CSS 层次结构以覆盖默认设置。
感谢 ezanker 的宝贵意见。添加 padding: 40px 使中心对齐变得完美!
.ui-listview > li > a.ui-btn {
text-align: center;
padding: 40px; /* see ezanker's comment below */
}
关于html - 如何在没有文本添加额外行的情况下使列表菜单项居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28101587/