現在の HTML マークアップに基づいて、タグで指摘されているように、CSS のみを使用するソリューションは、次のように実現できます。
この実用的なフィドルの例を見てください!

HTML
<div id="block">
<div id="content">Some content goes here.</div>
<div id="image">
<img src="path_to_image" />
</div>
</div>
CSS
#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 */
}
position
使用されている技術と競合するいくつかの css 宣言を削除する必要がありました。ただし、それらがなくてもまったく同じレイアウトを実現できるため、CSSvertical-align:middle
は期待どおりに機能します。
既存の CSS 宣言を削除せずに、まったく同じ目標を達成する、マークアップに対する jQuery ソリューション:
この実用的なフィドルの例を見てください!

jQuery
のimg
内側に移動#image
して高さを収集し、それを 2 で割り、結果の値で負のマージンを適用します。
$(function() {
var $target = $('#image').find('img');
$target.css({
"margin-top" : "-" + ($target.height()/2) + "px" // adjust the top margin
});
});
CSS
#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 */
}
HTML
<div id="block">
<div id="image">
<img src="path_to_image" />
</div>
<div id="content">Some content goes here.</div>
</div>
現在のマークアップは保持され、それを機能させるために追加の css が追加されました。jQueryの部分はできるだけシンプルに!