html - 按钮应保持垂直对齐

Question

我想垂直居中对齐按钮，即使 li 的 height 和 line-height 改变，它也应该保持垂直对齐，或按钮的 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

添加一个 display:inline 到你的按钮 - 它应该没问题

 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>