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：

阻止（导航栏内的每个块）：

.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

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

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

<强> Demo

Answer 2

您可能希望使用vertical-align

vertical-align CSS属性指定了一个垂直对齐方式内联或表格框。

尝试：

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

虽然这是假设您没有可能会干扰的其他样式设置，但很难说没有您的CSS。您可能还需要设置margin:0;或从包含padding

中删除任何li

Answer 3

在你的css中试试margin: 0 auto

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

3 个答案: