ボタンを垂直に揃えたままにする

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>