Как выровнять мои изображения по вертикали с помощью текстов

Question

Как выровнять мои изображения по вертикали с помощью текстов

0

У меня вопрос относительно вертикального выравнивания моего изображения и текста

У меня есть кто-то вроде

<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

Может ли кто-нибудь мне помочь? Большое спасибо!

Изображение будет в вертикальной середине независимо от того, сколько строк текста у меня есть.

FlyingCat 20 сен. 2013, в 01:42

Источник

Теги:

html

css

3 ответа

Ещё вопросы

frank_ivan · Answer 1 · 2013-09-19T21-18-00.000Z

Проверь это

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

Я надеюсь помочь вам.

ug_ · Answer 2 · 2013-09-19T20-53-00.000Z

Вы должны вертикально выравнивать текст, а также изображение

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

Viji · Answer 3 · 2013-09-19T20-16-00.000Z

попробуйте этот код, проверьте 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;
}

Спасибо за JSFiddle, я исправил код и обновил ответ