Html 如何将图像与文本垂直对齐

我有一个关于图像和文本垂直对齐的问题

我有这样的人

<div id='div1'>
  <div id='div2'>
    text here, more and more and more and more texts…….
    <img src='test.png' class='img'/>
  </div>
</div>

#div2{
    border-color: black;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    padding: 10px;
    font-size: .8em;
}

#div1{
    width: 250px;
}

.img{
   float:right;
   vertical-align:middle;
}

有人能帮我吗？非常感谢

---

无论我有多少行文本，图像都将处于垂直中间。

您必须垂直对齐文本和图像

<div id='div1'>
  <div id='div2'>
      <span>text here, more and more and more and more texts…….</span>
    <img src='http://www.designboom.com/cms/images/user_submit/2012/10/asdfg_osi_skystack_d2n_01_m2nl.jpg' class='img' width="100px" height="auto"/>
  </div>
</div>

#div2 > * {
    vertical-align: middle;
}

文本在这里，越来越多的文本……。
#第2部分>*{
垂直对齐：中间对齐；
}

尝试此代码，检查JSFIDLE:

文本在这里，越来越多的文本……。这里的文字，越来越多的文字……这里的文字，越来越多的文字……。文本在这里，越来越多的文本……。文本在这里，越来越多的文本……。
#第二组{
边框颜色：黑色；
边框样式：实心；
边框宽度：0 1px 1px 1px；
填充：10px；
字体大小：.8em；
位置：相对位置；
}
#第一组{
宽度：250px；
}
.img{
浮动：对；
垂直对齐：中间对齐；
位置：绝对位置；
最高：40%；
右：0px；
}
#div3{宽度：100px；
单词包装：打断单词；
}

---

希望能对您有所帮助。

谢谢您的JSFIDLE，我已经更正了代码并更新了答案

<div id='div1'>
  <div id='div2'>
      <span>text here, more and more and more and more texts…….</span>
    <img src='http://www.designboom.com/cms/images/user_submit/2012/10/asdfg_osi_skystack_d2n_01_m2nl.jpg' class='img' width="100px" height="auto"/>
  </div>
</div>

#div2 > * {
    vertical-align: middle;
}

<div id='div1'>
  <div id='div2'>
      <div id ="div3">text here, more and more and more and more texts……. text here, more and more and more and more texts…….text here, more and more and more and more texts……. text here, more and more and more and more texts……. text here, more and more and more and more texts…….</div>
    <img src='http://www.designboom.com/cms/images/user_submit/2012/10/asdfg_osi_skystack_d2n_01_m2nl.jpg' class='img' width="100px" height="auto"/>
  </div>
</div>



#div2{
    border-color: black;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    padding: 10px;
    font-size: .8em;
    position:relative;
}

#div1{
    width: 250px;
}

.img{
   float:right;
   vertical-align:middle;
    position:absolute;
    top:40%;
    right:0px;
}

#div3 {width: 100px;
    word-wrap:break-word;
}

 html :
 <div id='div1'>
 <div id='div2'>
 <p> text here, more and more and more and more texts…….</p>
 </div><div class="right"><img src='test.png' class='img'/></div>
 </div>

#div2{padding: 10px;
font-size: .8em;
float:left;
border: 2px solid #ccc;
vertical-align:middle;}
#div1{
width: 350px;
border: 2px solid #000;
height:100px;
}
.right{
 float:right;
 }