提问者:小点点

左侧和右侧备选组中的浮动图像和文本垂直对齐,中间为未知高度的div


是否有可能使文本垂直对齐中间在一个未知的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>

共1个答案

匿名用户

您尚未共享任何CSS代码。您似乎还缺少一个结束语

这里有一个建议,以实现我认为您正在尝试的目标(适用于IE9):

超文本标记语言

<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%);
}

小提琴
http://jsfiddle.net/tmabpn8d/