Clever Geek Handbook

Vertically align text in div to height of floating image

I want to build an html page that shows an image with description, description and image are dynamically generated and two common situations can be found:

unwrapped image

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

wrapped image

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

While the first text is too short to wrap the image, the second is long enough to wrap it.

I love this effect, but I want to modify the first case a bit, so here's my question:

Is it possible to vertically align the text so that it is vertically centered according to the height of the image? (of course I want to keep the wrap-around effect with the longer text)

Graphically:

I want to:

actual result

to become next:

wished result

+3


source to share


2 answers


Here 's how you do it

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

For the jQuery above to work, include the below snippet in the tag <header>

(before calls to all your jQuery docs)

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

Check out this site for more information on this

+1


source


Make the wrapper div display: display the table and text div: table-cell; Verticle-Align: Medium



If it doesn't work then also apply overflow: hidden in text div

0


source






More articles:


All Articles