如何在div中对齐span元素

Question

我在div中有很多span元素。例如：

<div>
    <span>element 1 </span>
    <span>element 2 </span>
    <span>element 3 </span>
</div>

我想垂直对齐span元素2，使其比其他两个高50px。我怎么能这样做？

我试着像这样设计样式，但我没有工作：

width: 100px;
height: 50px;
display:table-cell;
vertical-align: top

JSFIDDLE：https://jsfiddle.net/3t6ao52q/1/

我希望它看起来像这样：

Answer 1

您可以在第一个和第三个 vertical-align 上使用 <span> 属性，

查看 jsFiddle

div{
    border: 1px solid #000;
    width: 300px;
}
span{
    width: 100px;
    height: 100px;
    display:table-cell;
    vertical-align: top;
}
span:nth-child(1), 
span:nth-child(3) {
    vertical-align: middle;
}

结果

Answer 2

尝试创建一个类：

.element {
    position:relative; 
    top: +50px;
}

<div>
<span class="element">element 1 </span>
<span>element 2 </span>
<span class ="element">element 3 </span>