离子图标未对齐

Question

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

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");
}

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

有关如何解决这个问题的任何想法？我已经尝试过＆＃34;复制＆＃34;类图标，.ion类，但没有成功。

只是一个更新，正如@dippas所建议的那样，我试图删除vertical-align：top并放置一些＆＃34;像素＆＃34;在背景位置。问题是：我认为有些东西限制了图标的大小或者其他div以上的覆盖＆＃34;覆盖＆＃34;图片。请参阅下面的更新：

Answer 1

由于我没有小提琴，你应该尝试一些事情：

• 删除 vertical-align: top;

  和/或：

• 更改：background-position: center center;至 例如：background-position: 0 5px;

因为上面的这些解决方案确实很有效（基于你的问题的更新），你应该这样做：

此行中
• 设置 height： .icon-requests, .icon-alerts, .icon-companies, .icon-messages, .icon-profile

这样可以解决您的问题。

Answer 2

这会对你有帮助。

.tabs .tab-item .icon.mcfly {
    background-repeat: no-repeat;
    background-position: 50%;
    height: 100%;
    background-image: url('../img/home.png');
    background-size:contain;
}

<ion-tab icon="icon icon-home" href="#/tab/requests" icon-on="mcfly" icon-off="mcfly">