離子標題圖像和文本不出現在同一行

我必須使離子標題圖像和文本出現在同一行，但文本放置比圖像低一點點。離子標題圖像和文本不出現在同一行

<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

有一個小的白線出現在離子標題欄和離子選項卡之間，我在上面放置了離子選項卡。有什麼方法可以解決這個問題嗎？該細線只出現在設備本身上，不在瀏覽器或模擬器上 –

離子標題圖像和文本不出現在同一行

回答

相關問題