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

Question

我正在使用温泉 ui 开发一个 phonegap 移动应用程序。uild。工具栏 line-height 设置为工具栏的大小，以便内部元素垂直居中，text-align 居中。它在浏览器中运行良好，但在物理设备上运行不佳。 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;
}

这是应用程序在物理设备上的屏幕截图。

Answer 1

该问题仅针对我的 LG G2 运行 Lollipop。在另外两个设备上测试，工作正常。

Answer 2

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

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

如果是这种情况，请不要忘记在图标上使用 "margin-right: 5px;"

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

Onsen UI Toolbar title and icons are not vertically aligned in physical device

css

jquery

android

angularjs

onsen-ui