html - 画像をテキストと垂直方向に揃える方法

Question

画像とテキストの縦方向の配置について質問があります

みたいな人がいます

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

私は私の結果が欲しい

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

誰でもそれについて私を助けることができますか? どうもありがとう！

テキストの行数に関係なく、画像は垂直方向の中央になります。

Answer 1

画像だけでなくテキストも垂直方向に配置する必要があります

<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

このコードを試して、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

これをチェックして

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

お役に立てれば幸いです。