StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>A solution using only CSS</strong>, based on your current HTML markup and as pointed out by your tags can be accomplished like this:</p> <p>See this <a href="http://jsfiddle.net/zuul/8w7Gx/" rel="nofollow noreferrer">working Fiddle</a> example!</p> <p><img src="https://i.stack.imgur.com/dYpuc.jpg" alt="enter image description here"></p> <p><strong>HTML</strong></p> <pre><code><div id="block"> <div id="content">Some content goes here.</div> <div id="image"> <img src="path_to_image" /> </div> </div> </code></pre> <p><strong>CSS</strong></p> <pre><code>#block { width: 348px; display: table; /* set the main wrapper to display as a table */ } #content { width: 164px; padding: 20px; } #image { width: 144px; display: table-cell; /* set the inner wrapper to display as a cell */ vertical-align: middle; /* tell to vertically align the contents */ } </code></pre> <p>Was necessary to remove some css <code>position</code> declarations that conflict with the technic being used. But you can achieve exactly the same layout without them, thus allowing the CSS <code>vertical-align:middle</code> to work as expected.</p> <hr> <p><strong>A jQuery solution</strong> to your markup without removing any of your existent CSS declarations and achieving exactly the same goal:</p> <p>See this <a href="http://jsfiddle.net/zuul/HNVGU/" rel="nofollow noreferrer">working Fiddle</a> example!</p> <p><img src="https://i.stack.imgur.com/oJ7LO.jpg" alt="enter image description here"></p> <p><strong>jQuery</strong></p> <p>Get to the <code>img</code> inside the <code>#image</code> and collect its height, divide it by two and apply a negative margin to it with the resulting value.</p> <pre><code>$(function() { var $target = $('#image').find('img'); $target.css({ "margin-top" : "-" + ($target.height()/2) + "px" // adjust the top margin }); }); </code></pre> <p><strong>CSS</strong></p> <pre><code>#block { width: 348px; position: relative; } #content { width: 164px; padding: 20px; margin-right: 144px; } #image { width: 144px; position: absolute; right: 0; top: 0; /* fit to the top */ bottom: 0; /* fit to the bottom */ /*overflow:hidden;*/ /* optional if the img is bigger that this container */ } #image img { position: absolute; /* remove element from the document flow */ top: 50%; /* move it down by 50% of its parent height */ } </code></pre> <p><strong>HTML</strong></p> <pre><code><div id="block"> <div id="image"> <img src="path_to_image" /> </div> <div id="content">Some content goes here.</div> </div> </code></pre> <p>Your current markup is preserved and some extra css was added to make it work. Leaving the jQuery part as simple as possible!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload