如何在不添加文本的情况下将列表菜单项居中
[英]How to center list menu item without text adding an extra line
问题描述
I've been trying to figure this out for a while but I can't seem to get it to work. 
我已经尝试了一段时间，但似乎无法正常工作。 All I want is to add text in the middle of the list item (see code) however it creates an extra line and makes the row bigger. 我只想在列表项的中间添加文本（请参见代码），但是这会创建额外的一行并使行变大。 I tried using the tag but it doesn't work. 我尝试使用标签，但无法正常工作。 How can I add the text to be centered without changing the row size? 如何在不更改行大小的情况下添加居中文本？
<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>
3 个解决方案
解决方案1
2 2015-01-23 12:21:37
There is a better solution than adding spans. 有一个比添加跨度更好的解决方案。 Copy jQuery Mobile button's CSS, that are used for icons. 复制用于图标的jQuery Mobile按钮的CSS。 Do the changes you want to them. 对它们进行所需的更改。 Of course, add a custom class to a tag. 当然，添加自定义类来a标签。
See it working here . 看到它在这里工作。
<li>
<a href="#" class="ui-icon-myicon">Center Text</a>
</li>
jQuery Mobile uses :after , use :before for your left side icon. 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");
}
To center text, follow CSS hierarchy to override default settings. 要居中放置文本，请遵循CSS层次结构以覆盖默认设置。
Thanks to ezanker for his valuable input. 感谢ezanker的宝贵意见。 Adding padding: 40px makes center alignment just perfect! 添加padding: 40px使中心对齐恰到好处！
.ui-listview > li > a.ui-btn {
text-align: center;
padding: 40px; /* see ezanker's comment below */
}
解决方案2
1 已采纳 2015-01-23 13:18:33
- Use
text-align: centerto center align the text.使用text-align: center居中对齐文本。 - Set the extra icon to
display: blockand use theui-btn-icon-leftclass to align left.将额外的图标设置为display: block并使用ui-btn-icon-left类向左对齐。
li.x-center > a.ui-btn {
text-align: center;
}
li.x-center > a > span {
display: block;
}
<ul data-role="listview" data-inset="true">
<li data-icon="myicon" class="x-center">
<a href="#"><span class="ui-btn-icon-left ui-icon-myicon2"></span>Center this text</a>
</li>
</ul>
解决方案3
0 2015-01-23 01:28:48
Add style="text-align:center" to your <a> tag: 将style="text-align:center"到您的<a>标签：
<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="#" style="text-align:center;"><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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.