Вертикальный текст Выравнивание в DIV по высоте плавающего изображения

Question

Я хочу построить страницу HTML, которая показывает изображение с описанием, описание и изображение будут динамически генерироваться, и можно найти эту две общую ситуацию:

<div style="width:500px; padding:10px; border:solid 1px;"> 
    <div style="width:100%; overflow: auto; border:solid 1px;"> 
    <img style="float:right; width:40%" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt. 
    </div> 
</div> 

<div style="width:500px; padding:10px; border:solid 1px;"> 
    <div style="width:100%; overflow: auto; border:solid 1px;"> 
    <img style="float:right; width:40%" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt. Suspendisse vel tristique massa. Ut lobortis sapien nec libero varius, vitae ullamcorper risus pretium. Nunc vulputate posuere auctor. Phasellus pulvinar nibh a risus semper, a lobortis justo ultricies. Etiam at pretium ligula. Nullam lobortis, nisl nec sollicitudin vestibulum, turpis neque porta neque, pellentesque egestas ipsum nunc id nisl. Morbi quis lacus quam. Pellentesque eget congue neque. Vestibulum elementum arcu nec condimentum posuere. Donec risus lorem, ornare pharetra ex a, lobortis molestie nunc. Suspendisse iaculis est eros, eu vestibulum nisi accumsan eget. Proin eget eleifend eros. 
    </div> 
</div> 

в то время как первый текст слишком коротка, чтобы обернуть изображение, второй достаточно долгота g, чтобы обернуть его.

Мне нравится этот эффект, но я хочу немного изменить в первом случае, так вот мой вопрос:

Есть возможность вертикального выравнивания текста таким образом, что является вертикальным центрируются в зависимости от высоты изображения? (Конечно, я хочу, чтобы сохранить эффект обруча с длинным текстом)

Графический:

я хочу это:

станьте этим:

Answer 1

Here, как вы могли бы сделать это

HTML

<div class="container"> 
    <div class="something"> 
     <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" /> 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt.</div> 
    </div> 
</div> 
<div class="container"> 
    <div class="something"> 
     <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" /> 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt. Suspendisse vel tristique massa. Ut lobortis sapien nec libero varius, vitae ullamcorper risus pretium. Nunc vulputate posuere auctor. Phasellus pulvinar nibh a risus semper, a lobortis justo ultricies. Etiam at pretium ligula. Nullam lobortis, nisl nec sollicitudin vestibulum, turpis neque porta neque, pellentesque egestas ipsum nunc id nisl. Morbi quis lacus quam. Pellentesque eget congue neque. Vestibulum elementum arcu nec condimentum posuere. Donec risus lorem, ornare pharetra ex a, lobortis molestie nunc. Suspendisse iaculis est eros, eu vestibulum nisi accumsan eget. Proin eget eleifend eros.</div> 
    </div> 
</div> 

CSS

.container { 
    width:500px; 
    padding:10px; 
    border:solid 1px; 
} 
.something { 
    width:100%; 
    overflow: auto; 
    border:solid 1px; 
} 
.something>img { 
    float:right; 
    width:40% 
} 

JS

$(document).ready(function() { 
    var numberOfItems = $(".container").length; 
    for (var i = 0; i < numberOfItems; i++) { 
     var imageHeight = $(".container:eq(" + i + ")").children(".something").children("img").height(); 
     var divHeight = $(".container:eq(" + i + ")").children(".something").children("div").height(); 
     if (divHeight < imageHeight) { 
      $(".container:eq("+i+")").children(".something").children("div").css({ 
       "margin-top": (imageHeight - divHeight)/2 + "px" 
      }); 
     } 
    } 
}); 

---

EDIT

Для вышеприведенного к работе JQuery, включают в себя фрагмент кода ниже в вашем <header> тег (до звонков на все ваши документы Jquery)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Посмотрите на this сайт для получения дополнительной информации об этом

Answer 2

Сделать отображение обертки div: отображение таблицы и текста div: table-cell; Verticle-Align: средний;

Если не работают, то применяются также переполнение: скрытый на текст DIV