一般的標題中需要一個圖片和文字標題如下，m-header中包含兩個元素，一個是圖片icon，另外一個是文字text

<div class="m-header"><div class="icon"></div><h1 class="text">Chicken Music</h1></div>

這種情況下在css中首先需要給父元素m-header設置position屬性，方便后續定位，然后設置高度，并且設置text-align值為center，使內容居中，同時設置font-size值為0，使圖片和文字之間沒有空隙。對于icon和text，由于都需要在一個標題欄中，它們的display屬性都應設置為inline-block，圖片的設置前面的博客中有描述，為了圖片和文字的中心線對齊，都應設置vertical-align屬性，在本文中都設置為top，同時為了使h1高度和m-header一致，設置line-height和父元素一致，可完美填充父元素，設置line-height與父元素一致可以使單行文字的垂直居中對齊（有關line-height元素的詳細使用）

.m-headerposition: relativeheight: 44pxtext-align: centercolor: $color-themefont-size: 0.icondisplay: inline-blockvertical-align: topmargin-top: 6pxwidth: 30pxheight: 32pxmargin-right: 9pxbg-image('logo')background-size: 30px 32px.textdisplay: inline-blockvertical-align: topline-height: 44pxfont-size: $font-size-large

帶圖片的標題

總結

以上是生活随笔為你收集整理的vue实现带图片的标题栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。