html - 如何将按钮对齐到导航栏的中心

Question

我正在使用 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>

我已经尝试使用 data-grid="c" 但它不起作用。

有什么想法吗？

我没有给这个元素添加任何CSS样式

这是编译后的 jQuery Mobile:

block (导航栏内的每个 block ):

.ui-grid-c > .ui-block-a, .ui-grid-c > .ui-block-b, .ui-grid-c > .ui-block-c, .ui-grid-c > .ui-block-d {
width: 25%;
}

ul.ui-grid-a, ul.ui-grid-b, ul.ui-grid-c, ul.ui-grid-d, ul.ui-grid-solo, li.ui-block-a, li.ui-block-b, li.ui-block-c, li.ui-block-d, li.ui-block-e {
margin-left: 0;
margin-right: 0;
padding: 0;
list-style: none;
}

.ui-block-a {
clear: left;
}

.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
margin: 0;
padding: 0;
border: 0;
float: left;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

li {
display: list-item;
text-align: -webkit-match-parent;
}

.ui-navbar ul {
list-style: none;
}

ul.ui-grid-a, ul.ui-grid-b, ul.ui-grid-c, ul.ui-grid-d, ul.ui-grid-solo, li.ui-block-a, li.ui-block-b, li.ui-block-c, li.ui-block-d, li.ui-block-e {
list-style: none;
}

ul, menu, dir {
list-style-type: disc;
}

.ui-bar-b, .ui-page-theme-b .ui-bar-inherit, html .ui-bar-b .ui-bar-inherit, html .ui-body-b .ui-bar-inherit, html body .ui-group-theme-b .ui-bar-inherit {
color: #fff /*{b-bar-color}*/;
text-shadow: 0 /*{b-bar-shadow-x}*/ 1px /*{b-bar-shadow-y}*/ 0 /*{b-bar-shadow-radius}*/ #111 /*{b-bar-shadow-color}*/;
font-weight: bold;
}

.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
color: #333 /*{a-page-color}*/;
text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}

.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
color: #333 /*{a-page-color}*/;
text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}

body, input, select, textarea, button, .ui-btn {
font-size: 1em;
line-height: 1.3;
font-family: sans-serif /*{global-font-family}*/;
}

图标

.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;
}

Answer 1

您只需要强制每个 block 内的按钮完全填充宽度即可。

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

Demo