How to vertical align my images with Texts - html

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

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.

Answer 3

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