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

Question

我有一个页面，其中根据图像所属的类别并排显示图像，每个图像数组均以其所属的类别开头。 图片的宽度和高度会有所不同，但会放入绝对高度为330px的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中完成。 就是 以某种方式测量距.front-work div内部顶部的图像距离，然后将该值分配为.front-index div作为内联代码（top：任意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. 在第一个垂直居中的表格中制作一个表格单元格div
3. 在此div中，使另一个细分与图片高度相同。

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/

我希望这为您带来清晰，可理解和有用的解决方案。

问候，

杰夫