离子标题图像和文本不会出现在同一行答案

【问题标题】：Ionic header image and text not appears on the same line离子标题图像和文本不会出现在同一行
【发布时间】：2016-07-06 14:52:34
【问题描述】：

我必须使离子标题图像和文本出现在同一行，但文本放置在比图像低一点的位置。

<ion-header-bar class="bar-positive" align-title="center">
    <h1 class="title" >
        <img class="title-image" src="http://www.fnordware.com/superpng/pngtest16rgba.png" height="80%" />
        <span>App Project</span>
     </h1>
  </ion-header-bar>

Codepen ex

【问题讨论】：

标签： css angularjs ionic-framework

【解决方案1】：

只需将vertical-align: middle; 设置为title-image，如下所示：

.title-image {
  vertical-align: middle;
}

这将导致它与标题/文本垂直对齐。

Codepen

【讨论】：

那么你可以使用.bar .title { font-size: 15px !important; }。因为样式表的顺序不正确，所以重要的是只对 codepen。在 Ionic 项目中，您可以更改 $bar-title-font-size 全局变量或设置自定义样式表以覆盖默认样式。
离子标题栏和离子标签之间出现一条小白线，我将离子标签放在顶部。有什么办法可以解决这个问题吗？这条细线只出现在设备本身上，而不是浏览器或模拟器上
如果您有其他问题，您应该提出一个新问题。但是您可能在选项卡或最有可能的标题上设置了边框。尝试删除边距。