javascript - 跨度动态高度内的CSS垂直对齐按钮

Question

我有这种情况Demo ，当垂直调整窗口大小时，我希望能够让跨度像口琴一样(我有这个工作)。不幸的是，我无法让 span 内的按钮在中间垂直对齐，它们始终在 span 中与顶部对齐。我什么都试过了。

谢谢。

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

            </div>

Answer 1

基本上，您只需在“verticle-tool”Span 标记内添加另一个 HTML 元素，以利用 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>

See your updated Js.Fiddle here.