Javascript css垂直对齐按钮内跨动态高度

我有这种情况，当垂直调整窗口大小时，我希望能够让跨距像口琴一样工作（我有这个功能）。不幸的是，我不能获得按钮内跨度垂直对齐中间，他们总是对齐到顶部在跨度。我什么都试过了

Thx

---

基本上，您只需要在“verticle tool”中添加另一个HTML元素

Span

标记，以利用

display:table cell

属性

CSS

.cell {
    display:table-cell;
    vertical-align: middle;
}

HTML

<div id="color-list">
    <span class="vertical-tool">
        <span class="cell"><button id="black-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="blue-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="yellow-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="orange-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="red-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="green-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="clear-writing-button" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="clear-page-button" class="vertical-icon"></button></span>
    </span>
</div>

---

谢谢。伟大的祝你在新的一年里一切顺利。

<div id="color-list">
    <span class="vertical-tool">
        <span class="cell"><button id="black-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="blue-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="yellow-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="orange-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="red-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="green-color" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="clear-writing-button" class="vertical-icon"></button></span>
    </span>
    <span class="vertical-tool">
        <span class="cell"><button id="clear-page-button" class="vertical-icon"></button></span>
    </span>
</div>