垂直對齊兩個不同高度的<span>

Question

如何水平對齊兩個<span>元素，使它們在x軸上的高度中點對齊？這就是我想要的東西：

所有我見過的其他解決方案不產生這樣的結果對我來說。他們沿着頂部對齊兩個<span>。 下面是代碼：

<div> 
    <span> span1 </span> 
    <span> span1 </span> 
</div> 

Answer 1

下面是解

HTML： -

<div> 
    <span class="span1"> span1 </span> 
    <span class="span2"> span1 </span> 
</div> 

CSS： -

span{ 
    display:inline-block; 
    vertical-align:middle; 
    text-align:center; 
} 
.span1{ 
    padding:25px; 
    background-color:#e4e4e4; 
    width: 100px; 
} 
.span2{ 
    padding:8px; 
    width: 80px; 
    background-color:#e4e4e4; 
} 

工作DEMO !!!! :)

Answer 2

隨着display: inline-block CSS屬性：

span { 
 
    display: inline-block; 
 
    background: brown; 
 
    line-height: 70px; 
 
    padding: 0 20px; 
 
    margin: 0 10px; 
 
    color: white; 
 
} 
 

 
span + span { 
 
    line-height: 40px; 
 
}

<div> 
 
    <span> span1 </span> 
 
    <span> span1 </span> 
 
</div>

Answer 3

Flexbox，就可以做到這一點：

span { 
 
    background: rebeccapurple; 
 
    line-height: 70px; 
 
    padding: 0 20px; 
 
    color: white; 
 
    margin: 5px; 
 
} 
 
span:nth-child(2) { 
 
    padding: 25px; 
 
} 
 
div { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div> 
 
    <span> span1 </span> 
 
    <span> span1 </span> 
 
</div>