如何使文字与文字垂直对齐

Question

I have a question regarding a vertical align of my image and text

I have someone like

<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;
}

I want my result like

text here, more and more and more            
and more and more and more and more         img here
texts

Can anyone help me about it? Thanks a lot!

The image will be in vertical middle no matter how many line of texts I have.

Answer 1

You have to vertical align the text as well as the image

<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;
}

Answer 2

try this code, check JsFiddle : http://jsfiddle.net/nAHwn/2/

<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;
}

Answer 3

Check this

 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>

css

#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;
 }

I hope help you.