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

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

<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

来源

2016-07-06 Avinash Raj

只需设置vertical-align: middle;到title-image这样的：

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

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

Codepen

来源

2016-07-06 06:52:34 thepio

作品,,我也想减少文本大小（应用工程）.. –

然后，你可以只使用'的.bar .title伪{字体大小：15px的重要; }'。重要的是只针对codepen，因为样式表的顺序不正确。在Ionic项目中，您可以更改'$ bar-title-font-size'全局变量或设置自定义样式表来覆盖默认样式。 – thepio

有一个小的白线出现在离子标题栏和离子选项卡之间，我在上面放置了离子选项卡。有什么方法可以解决这个问题吗？该细线只出现在设备本身上，不在浏览器或模拟器上 –

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

回答

相关问题