按钮应保持垂直对齐

Question

我想垂直居中对齐按钮，即使height和line-height的{​​{1}}发生更改，或按钮的li发生更改，它也应保持垂直对齐

＆＃13;

＆＃13;

font-size

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>