将 div 与第一个垂直居中的 div 对齐

Question

我有一个页面，根据图像所属的类别并排显示图像，每个图像数组都以其所属的类别开始。图片的宽度和高度各不相同，但被放入绝对高度为 330 像素的 div 中。

CSS：

.front-index {  
margin: 0 1em 0 2em; 
}

.front-work { 
    margin: 0 2em 2em 0; 
    display: table; 
    width: 66px; 
    position: relative;
    height: 330px;
    background-color:#f0f0f0;
}

.front-work img { 
    margin: .3em 0 .3em 0; 
}

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.wraptocenter * {
    vertical-align: middle;
}

.front-index,
.front-work {
    float: left;
}

HTML：

<div class="front-index"><p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p></div>


    <div class="front-work">
        <div class="wraptocenter">
            <img width="162" height="250" src="http://images.fanpop.com/images/image_uploads/Yellow-Wallpaper-yellow-646738_800_600.jpg"/>
        </div>  
    </div>  

    <div class="front-work">
        <div class="wraptocenter">
            <img width="250" height="166" src="http://www.takenseriouslyamusing.com/wp-content/uploads/2012/08/Blue.png"/>
        </div>  
    </div>
…

JSFIDDLE：http://jsfiddle.net/rCAKa/9/

我想将文本与右侧第一张图片对齐。

我的想法是，这可能应该在 jquery 中完成。 IE。以某种方式测量 .front-work div 内部距顶部的图像距离，然后将该值作为内联代码分配给 .front-index div（顶部：任何 px ）。

也许你们当中有人遇到过这类问题并且知道这类问题的解决方案？ CSS 或 JS。

Answer 1

以我的拙见，我认为您所做的事情不可能通过 CSS 实现 - 它需要一些简单的 JavaScript 技巧，因为您必须知道第一个图像的相对位置（从容器顶部开始）用于定位文本的权利 - CSS 并非完全为之设计的。

JS 中的策略是：

1. 使用您要定位的文本遍历每个元素
2. 获取第一个图像的垂直顶部偏移量（相对于包含父级）

3. 设置顶部填充匹配到图像的顶部位置。或者，您可以设置子元素的顶部位置、内边距或边距，或其他方式来重新定位文本。

   $(document).ready(function() {
       $(".front-index").each(function() {
           var fromTop = $(this).next().find("img").position().top;
           $(this).css({
               "padding-top":fromTop
           });
       });
   });
   

我已经分叉了你的小提琴，你可以在这里看到它 - http://jsfiddle.net/teddyrised/LT54V/1/

p/s：在相关说明中，.wraptocenter * { } 可能不是最好的（如最有效的）选择器，因为如果元素中有许多子元素（可能有或可能有更多的子元素）元素），CSS 将不得不遍历所有元素。相反，请尝试使用 .wraptocenter > * { } 或仅使用 .wraptocenter img { } :)

Answer 2

我首先尝试使用 css 解决问题。一段时间后，我想出了以下逻辑：

1. 创建一个与右侧单元格高度相同的div，显示设置为表格
2. 在第一个垂直居中的表格单元格中创建一个表格单元格
3. 在此 div 中创建另一个与图像高度相同的 subdiv。

HTML 代码是这样的：

<div class="front-index">
    <div class="front-index-inner">
        <div style="height:250px;">
            <p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p>
        </div>
    </div>
</div>

作为我的 CSS 部分：

.front-index {  
    margin: 0 1em 0 2em; 
    display: table;
    height: 330px;
    overflow: hidden;
}
.front-index-inner {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

你可以在这里看到结果：http://jsfiddle.net/rCAKa/10/

我希望这会给您带来一个清晰、易懂且有用的解决方案。

您好，

杰夫