Reputation: 96
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;
}
Upvotes: 0
Views: 2589
Reputation: 31732
All you need is, to force button inside each block to fill width completely.
.ui-navbar li a {
width: 100% !important;
}
Upvotes: 2
Reputation: 71150
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
Upvotes: 0