Question

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

THX。

<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

基本上你只需要在你的＆＃34; verticle-tool＆＃34;中添加另一个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>

See your updated Js.Fiddle here.

跨越动态高度的css垂直对齐按钮

1 个答案: