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

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

我希望能帮助你。

如何使用文本垂直对齐我的图像

3 个答案: