按鈕應保持垂直對齊

Question

我想垂直居中對齊按鈕，即使height和line-height的li發生更改，或者font-size的按鈕發生更改，它仍應保持垂直對齊。

ul { 
 
    display: table; 
 
    width: 300px; 
 
    list-style: none; 
 
    list-style-image: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: aqua; 
 
} 
 

 
ul li { 
 
    float: right; 
 
    margin-right: 8px; 
 
    height: 80px; 
 
    line-height: 80px; 
 
} 
 

 
ul li.header-logo { 
 
    float: left; 
 
    font-size: 50px; 
 
} 
 

 
#button { 
 
    padding: 4px 6px; 
 
    background-color: #ff9191; 
 
    border: 2px solid #00b5cc; 
 
    line-height: 24px; 
 
}

<div id="logo-row"> 
 
    <ul> 
 
     <li class="header-logo">AAA</li> 
 
     <li><div id="button">BUTTON</div></li> 
 
     <li>LINK</li> 
 
    </ul> 
 
</div>

Answer 1

添加顯示：內嵌到您的按鈕 - 這應該是罰款

ul { 
 
    display: table; 
 
    width: 300px; 
 
    list-style: none; 
 
    list-style-image: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: aqua; 
 
} 
 

 
ul li { 
 
    float: right; 
 
    margin-right: 8px; 
 
    height: 80px; 
 
    line-height: 80px; 
 
} 
 

 
ul li.header-logo { 
 
    float: left; 
 
    font-size: 50px; 
 
} 
 

 
#button { 
 
    display:inline; 
 
    padding: 4px 6px; 
 
    background-color: #ff9191; 
 
    border: 2px solid #00b5cc; 
 
    line-height: 24px; 
 
}

<div id="logo-row"> 
 
    <ul> 
 
     <li class="header-logo">AAA</li> 
 
     <li><div id="button">BUTTON</div></li> 
 
     <li>LINK</li> 
 
    </ul> 
 
</div>