divの画像の右側にテキストを中心に揃えます

Question

画像とテキストが並んでいますが、どちらもfloat:rightのdiv内にあります。 This is how it looks now。私は画像の横にテキストを縦方向に整列させる必要があります（例えば、Text Answer）。それ、どうやったら出来るの？提案してください。次のように

<div id="content">Content here</div> 
     <div id="navbar"> 
      <br> 
      <div id ="quesBuilderText">Question Builder</div> <br> 
      <div id = "textImage"> <img id="textImg"/></div> 
      <div id = "textText"> Text Answers </div> 
      <br> <br> <br> 
      <div id = "multipleChoiceImage"> <img id="multipleChoiceImg"/></div> 
      <div id = "multipleChoiceText"> Multiple Choice </div> 
      <br> <br> <br> 
      <div id = "dropdownImage"> <img id="dropdownImg"/></div> 
      <div id = "dropdownText"> Dropdown </div> 
</div> 
</div> 

サンプルCSS

#navbar { 
    float: right; 
    width: 24%; 
    background-color: white; 
} 
#textImg { 
    width:30%; 
    max-width: 40px; 
    height:auto; 
    margin-left: 20px; 
    float: left; 
} 

#textText { 
    margin-left: 10px; 
    float: left; 
    color: #7F7F7F; 
} 

Answer 1

あなたはそれを行うことができます。本質的な部分は、#navbar>divのためのCSSルールですが、私は他の多くの設定を削除し、（代わりにIDの）3つのすべてのテキストにクラス.textTextを追加したことに注意してください：SOで

#navbar { 
 
    float: right; 
 
    width: 30%; 
 
} 
 

 
.textText { 
 
    margin-left: 10px; 
 
} 
 

 
#quesBuilderText { 
 
    margin-bottom: 20px; 
 
    font-weight: bold; 
 
} 
 

 
#navbar>div { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div id="content">Content here</div> 
 
<div id="navbar"> 
 
    <br> 
 
    <div id="quesBuilderText">Question Builder</div> <br> 
 
    <div id="textImage"> <img src="http://placehold.it/40x30/fb7" id="textImg" /></div> 
 
    <div class="textText"> Text Answers </div> 
 
    <br> <br> <br> 
 
    <div id="multipleChoiceImage"> <img src="http://placehold.it/40x30/fb7" id="multipleChoiceImg" /></div> 
 
    <div class="textText"> Multiple Choice </div> 
 
    <br> <br> <br> 
 
    <div id="dropdownImage"> <img src="http://placehold.it/40x30/fb7" id="dropdownImg" /></div> 
 
    <div class="textText"> Dropdown </div> 
 
</div>