左右替代组中的浮动图像和文本在div的未知高度中垂直对齐中间

Question

Is it possible to make the text vertically align middle in an unknown height of div with a floated image. The first and third div group of 'groupsection2', image will float to left; and the second and forth group of 'groupsection2', image float to right:

<div class="groupsection2 clear">
<div class="groupfeature">
<span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
<div class="feature-content">
<h3>Reliability you can count on Reliability you can count on</h3>
<p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
unlimited access to Antec’s incomparable technical support and customer service</p>
</div>
</div>

<div class="groupsection2 clear">
<div class="groupfeature">
<span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
<div class="feature-content">
<h3>Reliability you can count on Reliability you can count on</h3>
<p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
unlimited access to Antec’s incomparable technical support and customer service</p>
</div>
</div>

<div class="groupsection2 clear">
<div class="groupfeature">
<span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
<div class="feature-content">
<h3>Reliability you can count on Reliability you can count on</h3>
<p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
unlimited access to Antec’s incomparable technical support and customer service</p>
</div>
</div>

Answer 1

You haven't shared any of your CSS code. You also seems to be missing a closing </div> tag in each code block.

Here's a suggestion to achieve what I think you're trying to do (works on IE9+):

HTML

<div class="groupsection2 clear">
<div class="groupfeature">
<span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
<div class="feature-content">
<h3>Reliability you can count on Reliability you can count on</h3>
<p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
unlimited access to Antec’s incomparable technical support and customer service</p>
</div>
</div>
</div>

<div class="groupsection2 clear">
<div class="groupfeature">
<span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
<div class="feature-content">
<h3>Reliability you can count on Reliability you can count on</h3>
<p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
unlimited access to Antec’s incomparable technical support and customer service</p>
</div>
</div>
</div>

<div class="groupsection2 clear">
<div class="groupfeature">
<span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
<div class="feature-content">
<h3>Reliability you can count on Reliability you can count on</h3>
<p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
unlimited access to Antec’s incomparable technical support and customer service</p>
</div>
</div>
</div>

CSS

.feature-content {
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

Fiddle
http://jsfiddle.net/tmabpn8d/