Javascript 将div与第一个垂直中心div对齐

我有一个页面，我根据图像所属的类别并排显示图像，每个图像数组从它所属的类别开始。图像的宽度和高度各不相同，但被放入绝对高度为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;
}

<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>
…

HTML:

.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;
}

<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：

我想将文本与右侧第一幅图像对齐

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

---

也许你们当中有人曾经遇到过这种问题，并且知道解决这种问题的方法？CSS或JS。

以我的拙见，我不认为你可以通过CSS来做什么-它需要一些简单的JavaScript技巧，因为你必须知道右边第一个图像的相对位置（从容器顶部）才能定位文本-CSS并不是专为此设计的

JS的策略是：

使用要定位的文本循环遍历每个元素

获取右侧第一个图像的垂直顶部偏移（相对于包含父对象）

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

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

我用叉子叉了你的小提琴，你可以在这里看到它的作用-

---

p/s：另一方面，

.wraptocenter*{}

可能不是最好的（比如，最有效的）选择器，因为如果元素中有很多子元素（可能有或可能有更多子元素），CSS将不得不迭代所有子元素。相反，请尝试使用

.wrapotocenter>*{}

或只使用

.wrapotocenter img{}

：）

我第一次尝试使用css解决这个问题。过了一会儿，我想出了以下逻辑：

创建一个与右侧单元格高度相同的div，并将显示设置为table

在第一个垂直居中的单元格中创建一个表格单元格div

在此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>

您可以在这里看到结果：

我希望这能为您带来一个清晰、可理解和有用的解决方案

您好

---

Jef

黄色图像在哪里？Helo Jef。谢谢你的回答，它适用于第一个。但我在寻找一个解决方案，这将适用于两个文本，所以teddyrised答案是正确的，也为第二个文本编辑了它，使用了完全相同的工作方法。耶！这就是我想要的东西。我认为这是一个jquery解决方案，但我对它的了解很差。也感谢CSS提示。荣誉我意识到你已经为图像设置了0.3em的上下边距，这就是为什么文本没有完全对齐。您可以将marginTop值添加到jQuery中的fromTop变量，也可以不使用图像边距：）