如何在没有文本添加额外行的情况下使列表菜单项居中

Question

一段时间以来我一直在努力解决这个问题，但我似乎无法让它发挥作用。我想要的只是在列表项的中间添加文本（参见代码）但是它会创建一个额外的行并使行更大。我尝试使用标签，但它不起作用。如何在不更改行大小的情况下添加要居中的文本？

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

Answer 1

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

Answer 2

有比添加 span 更好的解决方案。复制 jQuery 移动按钮的 CSS，用于图标。对它们进行您想要的更改。当然，添加自定义 class 到 a 标签。

看到它工作 here。

<li>
  <a href="#" class="ui-icon-myicon">Center Text</a>
</li>

jQuery 移动设备使用 :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 */
}

Answer 3

使用 text-align: center 居中对齐文本。
将额外的图标设置为 display: block 并使用 ui-btn-icon-left class 左对齐。

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>

Fiddle

如何在没有文本添加额外行的情况下使列表菜单项居中

How to center list menu item without text adding an extra line

html

css

jquery-mobile

centering