jQuery移动居中按钮图标
注意上面的导航栏图像,它已应用于固定在页面底部的页脚中,我希望获得以下方面的帮助:jQuery移动居中按钮图标,jquery,mobile,icons,centering,code-cleanup,Jquery,Mobile,Icons,Centering,Code Cleanup,注意上面的导航栏图像,它已应用于固定在页面底部的页脚中,我希望获得以下方面的帮助: 设置每个按钮上方的图标格式,使其整齐居中(理想情况下使用CSS,但允许使用jQuery/jQuery Mobile) 清理我的代码。我很确定HTML和CSS中都有更简洁的版本,只要它们不晦涩难懂,我将非常感谢您帮助我清理粘贴在下面的代码 图标为24x24,以下是用于HTML的代码: <div data-role="footer" data-position="fixed" data-tap-toggle
- 设置每个按钮上方的图标格式,使其整齐居中(理想情况下使用CSS,但允许使用jQuery/jQuery Mobile)
- 清理我的代码。我很确定HTML和CSS中都有更简洁的版本,只要它们不晦涩难懂,我将非常感谢您帮助我清理粘贴在下面的代码
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div id="navigation" data-role="controlgroup" data-type="horizontal" class="center">
<a href="#" data-role="button" data-iconpos="top" id="home" data-icon="custom">Home</a>
<a href="#" data-role="button" data-iconpos="top" id="powerSource" data-icon="custom">Power Sources</a>
<a href="#" data-role="button" data-iconpos="top" id="storage" data-icon="custom">Storage</a>
<a href="#" data-role="button" data-iconpos="top" id="tripAnalysis" data-icon="custom">Trip Analysis</a>
<a href="#" data-role="button" data-iconpos="top" id="tripManager" data-icon="custom">Trip Manager</a>
<a href="#" data-role="button" data-iconpos="top" id="warning" data-icon="custom">Warnings & Alarms</a>
<a href="#" data-role="button" data-iconpos="top" id="powerSys" data-icon="custom">Power Systems</a>
<a href="#" data-role="button" data-iconpos="top" id="settings" data-icon="custom">Settings</a>
</div>
</div> <!-- / footer -->
.ui-icon-custom {
width:30px !important;
height:25px !important;
margin-left:-15px !important;
}
.center {
text-align: center;
}
#home .ui-icon {
background-image: url(/images/icons/home.png);
background-repeat: no-repeat;
}
#powerSource .ui-icon {
background-image: url(/images/icons/powerSource.png);
background-repeat: no-repeat;
}
#storage .ui-icon {
background-image: url(/images/icons/storage.png);
background-repeat: no-repeat;
}
#tripAnalysis .ui-icon {
background-image: url(/images/icons/tripAnalysis.png);
background-repeat: no-repeat;
}
#tripManager .ui-icon {
background-image: url(/images/icons/tripManager.png);
background-repeat: no-repeat;
}
#warning .ui-icon {
background-image: url(/images/icons/warning.png);
background-repeat: no-repeat;
}
#powerSys .ui-icon {
background-image: url(/images/icons/powerSys.png);
background-repeat: no-repeat;
}
#settings .ui-icon {
background-image: url(/images/icons/settings.png);
background-repeat: no-repeat;
}