画像の横にテキストを縦に並べる方法は？

私は以下のコードを持っており、画像の横にテキストを縦に並べたいと思います。画像の横にテキストを縦に並べる方法は？

.section_content { 
 
    width: 400px; 
 
} 
 

 
.section_content > ul > li > img { 
 
    width: 40px; 
 
    height: 40px; 
 
    padding: 5px; 
 
} 
 

 
.section_content > ul > li > a { 
 
    vertical-align: top; 
 
} 
 

 
.section_content > ul > li { 
 
    list-style-type: none; 
 
} 
 

 
.section_content > ul { 
 
    list-style-type: none; 
 

 
    padding-top: 45px; 
 
    padding-left: 5px; 
 
}

<div class="section_content"> 
 
     <ul> 
 
      <li><img src="img/linkedin.svg"><a href="https://be.linkedin.com/in/lel">LinkedIn</a></li> 
 
      <li>GitHUb</li> 
 
     </ul> 
 
    </div>

出典

2016-10-24 SnelleJelle

私はちょうどSO検索して見つかった同様の回答の多くがあるので、オフトピックとして、この質問を閉じるために投票しています。 – Rob

@Paulie_Dそれは重複した回答です。私はそれらの多数を掘り起こす時間がありませんでした。いずれにせよ、私は研究の不足がこれを終わらせるもう一つの理由だと信じています。 – Rob

研究の欠如は「CLOSE Vote」の理由ではありません...これはダウン投票の理由です。 –

あなたはそこにvertical-align: topを持っています。あなたが望むのは、リンクと隣に座っているはずの画像の両方に、vertical-align: middleです。

.section_content { 
 
    width: 400px; 
 
} 
 

 
.section_content > ul > li > img { 
 
    width: 40px; 
 
    height: 40px; 
 
    padding: 5px; 
 
} 
 

 
.section_content > ul > li > a, 
 
.section_content > ul > li img { 
 
    vertical-align: middle; 
 
} 
 

 
.section_content > ul > li { 
 
    list-style-type: none; 
 
} 
 

 
.section_content > ul { 
 
    list-style-type: none; 
 

 
    padding-top: 45px; 
 
    padding-left: 5px; 
 
}

<div class="section_content"> 
 
     <ul> 
 
      <li><img src="img/linkedin.svg"><a href="https://be.linkedin.com/in/lel">LinkedIn</a></li> 
 
      <li>GitHUb</li> 
 
     </ul> 
 
    </div>

出典

2016-10-24 01:07:53 jack

ありがとう！ .... – SnelleJelle

画像の横にテキストを縦に並べる方法は？

答えて

関連する問題