複数行の垂直方向の整列

Question

イメージがあり、<br>と複数行を使用したいと考えています。テキストを真ん中に配置する必要があります。

<table id="myTable"> 
    <tr> 
     <td> 
      <a> 
       <div> 
        <img class="vertical-align-icon-middle" src="/images/friendjoined_icon.png" /> 
       </div> 

      </a> 
      <div class="user-details"> 
       <div class="username-div"><span class="text-design">My profile</span></div><br/> 
       <div class="points-rank"> 
        <span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span></div> 
      </div> 
     </td> 
     <td class="right-icon"><p>hi</p></td> 
    </tr> 

</table> 

イメージが応答性がありサイズ変更可能なので、テキストを中央に保持するために何ができるかわかりません。いくつかの助けが必要です、ありがとう。私が欲しいもの

：

is something like this

Answer 1

私は私のコメントで述べてきたように、あなたはレイアウトのためにテーブルを使用しないでくださいは、あなたが側で画像とテキスト側を持つようにしたい場合は、私は思います

.image-block, 
 
.user-details { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 5px; 
 
}

<div class="image-block"> 
 
    <img class="vertical-align-icon-middle" src="http://placehold.it/400x200/" alt="" /> 
 
</div> 
 
<div class="user-details"> 
 
    <div class="username-div"> 
 
    <span class="text-design">My profile</span> 
 
    </div> 
 
    <div class="points-rank"> 
 
    <span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span> 
 
    </div> 
 
</div>