Onsen UI工具栏标题和图标在物理设备中没有垂直对齐

Question

我正在使用onsen ui构建一个phonegap移动应用程序。工具栏行高设置为工具栏的大小，以便内部元素垂直居中，文本对齐到中心。它在浏览器中工作得很好，但在物理设备上却没有。 的 CSS

.navigation-bar {
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
font-size: 14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
white-space: nowrap;
overflow: hidden;
word-spacing: 0;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
background: transparent;
border: none;
line-height: normal;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
display: block;
height: 44px;
padding-left: 0;
padding-right: 0;
background: rgba(56,56,56,0.97);
color: #dbd8d8;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 1px solid #ddd;
font-weight: 400;
width: 100%;
white-space: nowrap;
overflow: visible;
border-bottom: none;
}

ons-toolbar ~ .page__content {
top: 44px;
}

.navigation-bar__left {
max-width: 44%;
width: 27%;
text-align: left;
height: 100%;
line-height: 44px;

}

.navigation-bar__title {
height: 100%;
line-height: 44px;
font-weight: bold;
color: #dbd8d8;
margin: 0;
padding: 0;
overflow: visible;
}

.navigation-bar__right {
max-width: 50%;
width: 27%;
text-align: right;
height: 100%;
line-height: 50px;
}

以下是物理设备中app的屏幕截图。

Answer 1

该问题仅适用于我的LG G2运行Lollipop。在另外两台设备上测试，工作正常。

Answer 2

我使用Flex解​​决了这个问题：

.list__item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

别忘了使用＆＃34;保证金权利：5px;＆＃34;在图标上，如果是这种情况