How can I align buttons to the center of the navbar

Question

I'm using jQuery Mobile to create this navbar but I can't align the buttons to the center.

Here is my code:

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

I have tried with data-grid="c" but it's not working.

Any idea?

I haven't add any CSS style to this project

This is the compiled jQuery Mobile:

Block (each block inside the navbar):

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

Icon

.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

All you need is, to force button inside each block to fill width completely.

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

Demo

Answer 2

You may want to look at using vertical-align

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

Try:

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

Although this is on the assumption you dont have other style settings which may interfere, its hard to say without having your CSS. You may need to also set margin:0; or remove any padding from the containing li

Answer 3

在你的CSS中尝试margin: 0 auto