html - 如何对齐 div 中的 span 元素

Question

我在一个 div 中有很多 span 元素。例如:

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

我想垂直对齐跨度元素 2，使其比其他两个元素高 50 像素。我该怎么做？

我尝试像这样设置跨度的样式，但没有成功:

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

结果