html - 左右交替组中的 float 图像和文本在 div 的未知高度中垂直居中对齐

Question

是否可以使文本在带有 float 图像的未知高度的 div 中垂直居中对齐。 'groupsection2'的第一个和第三个div组，图片会向左浮动；和'groupsection2'的第二组和第四组，图像向右浮动:

<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

您还没有分享任何 CSS 代码。您似乎还缺少结束语 </div>每个代码块中的标记。

这是实现我认为您正在尝试做的事情的建议(适用于 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/