複数の行のテキストを垂直に配置するにはどうすればよいでしょうか？

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>