Html 如何将按钮与导航栏的中心对齐

我正在使用jQuery Mobile创建此导航栏，但无法将按钮与中心对齐

这是我的密码：

<footer data-role="footer" data-position="fixed" data-theme="b">
        <nav data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn ui-icon-audio ui-btn-icon-notext">Record</a></li>
                <li><a href="#load" class="ui-btn ui-icon-cloud ui-btn-icon-notext">Upload</a></li>
                <li><a href="#" class="ui-btn ui-icon-recycle ui-btn-icon-notext">Refresh</a></li>
                <li><a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">Clear</a></li>
            </ul>
        </nav>
</footer>

图标

---

您可能想看看如何使用

“垂直对齐CSS”属性指定对象的垂直对齐方式 内联或表格单元格框

尝试：

---

虽然这是在假设你没有其他风格设置可能会干扰，它很难说没有你的CSS。您可能还需要设置

边距：0

或从包含的

li

中删除任何

填充

，在css中尝试

边距：0 auto

，只需强制每个块内的按钮完全填充宽度即可

.ui-navbar li a {
  width: 100% !important;    
}

---

向我们展示你迄今为止尝试过的CSS。我还没有放任何CSS。但是我尝试了

display:inline block

和或

左边距：10px它根本不起作用。我已经更新了从开发者工具编译的CSS代码，但也不起作用。我已经更新了开发人员工具中编译的CSS代码
.ui-btn-icon-notext:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after {
left: 50%;
margin-left: -11px;
}

.ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after {
top: 50%;
margin-top: -11px;
}

.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
content: "";
position: absolute;
display: block;
width: 22px;
height: 22px;
}

.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
background-color: #666 /*{global-icon-color}*/;
background-color: rgba(0,0,0,.3) /*{global-icon-disc}*/;
background-position: center center;
background-repeat: no-repeat;
-webkit-border-radius: 1em;
border-radius: 1em;
}

a.ui-btn{
   vertical-align:middle;
}

.ui-navbar li a {
  width: 100% !important;    
}