离子图标不对齐

问题描述

我正在为一个项目使用Ionic Framework。我将默认字体图标更改为图像，我无法在垂直位置对齐图标。见下图：

p>

style.css：

  c> background-position：center center; 为
类似于： background-position：0 5px;  
  
  
 
 
因为上面的这些解决方案确实有效（根据您的问题的更新），您应该这样做：
 
 
 
 
 
  set   height ：  .icon -requests，.icon-alerts，
 .icon-companies，.icon-messages，.icon-profile   
 
 
 
 
 
，它可以解决你的问题。
 
I am using Ionic Framework for a project. I changed the default font icons to images and I can't align the icon at the vertical position. See image below:



The style.css:
.icon-requests, .icon-alerts, .icon-companies, .icon-messages, .icon-profile {
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center center;
    padding-right: 2px;
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 0 auto;
    vertical-align: top;
    margin-top: -0.1em;
}
.icon-requests {
    background-image: url("../img/requests.png");
}

.icon-alerts {
    background-image: url("../img/alerts.png");
}

.icon-companies {
    background-image: url("../img/companies.png");
}

.icon-messages {
    background-image: url("../img/messages.png");
}

.icon-profile {
    background-image: url("../img/profile.png");
}
And the tabs.html
<ion-tabs class="tabs-icon-only">


    <ion-tab icon="icon icon-requests" href="#/tab/requests">
    <ion-nav-view name="tab-requests"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="icon-alerts" href="#/tab/alerts">
    <ion-nav-view name="tab-alerts"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="icon-companies" href="#/tab/companies">
    <ion-nav-view name="tab-companies"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="icon-messages" href="#/tab/messages">
    <ion-nav-view name="tab-messages"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="icon-profile" href="#/tab/profile">
    <ion-nav-view name="tab-profile"></ion-nav-view>
    </ion-tab>

</ion-tabs>
Any ideas of how can I fix this? I already tried to "copy" the class icon, the .ion class, but without success.
Just an update, as suggested by @dippas I tried to remove the vertical-align: top and put some "pixels" at the background-position. The problem is: I think there is something limiting the size of the icons or another div above "covering" the image. See below for an update:
 解决方案 
Since I don't have a fiddle to work with, a couple a things you should try:
remove vertical-align: top;
and/or:
change this: background-position: center center; tosomething like: background-position: 0 5px;
because these solutions above did quite work (based on your question's update) , you should do this:
set height in this line: .icon-requests, .icon-alerts,.icon-companies, .icon-messages, .icon-profile
with that it will fix your problem.
                        
这篇关于离子图标不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！