如何將多行文本與背景圖像垂直對齊：在

Question

之前我有一個元素列表，其中添加了圖標作爲:before的背景。當標題長度很大時，圖像下方會顯示文字。

我怎麼能做出這個詞服務略低於諮詢？

li>a { 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
.submenu-icon:before { 
 
    content: ""; 
 
    margin-right: 0px; 
 
    background: url(/sites/all/themes/bootstrap_cck/images/sprites.png) no-repeat; 
 
    background-size: 40em; 
 
    background-position: -250px -184px; 
 
    padding: 15px 40px 12px 15px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    line-height: 47px; 
 
    width: 55px; 
 
    height: 47px; 
 
}

<li class="first"> 
 
    <a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services </a> 
 
</li>

Answer 1

可以a元素上使用display: flex。

a { 
 
    align-items: center; 
 
    display: flex; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 

 
.submenu-icon:before { 
 
    content: "PSEUDO"; 
 
    padding: 20px; 
 
}

<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services </a>

或者與背景圖像看起來應該像這樣。

a { 
 
    align-items: center; 
 
    display: flex; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 
.submenu-icon:before { 
 
    content: ""; 
 
    background: url('http://images2.wikia.nocookie.net/__cb20100211112757/dexter/de/images/2/27/System-search.png') no-repeat; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-size: contain; 
 
    margin: 15px; 
 
}

<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services </a>