Question

我有一个奇怪的情况，我需要一些输入。我认为我试图实现目标的方式是错误的。

我有一个包含3列的table。在一行中，左右td每个都填充select，而在中间列中应该有三个垂直排列的按钮：

HTML：

<table>
    <tr>
        <td class="content">
            <select multiple />
        </td>
        <td class="middle">
            <input type="button" value="1" />
            <br />
            <input type="button" value="2" />
            <br />
            <input type="button" value="S" class="special-button" />
        </td>
        <td class="content">
            <select multiple />
        </td>
    </tr>
</table>

CSS：

table {
    width: 100%;
    height: 100%;
}

select {
    width: calc(100% - 10px);
    height: 300px;
}

.content {
    width: 45%;
}

.middle {
    text-align: center;
    vertical-align: middle;
    padding-right: 10px;
}

.special-button {
    margin-top: 50px;
}

现在按钮＆＃34; 1＆＃34;和＆＃34; 2＆＃34;应该在其父td内垂直居中，而＆＃34; S＆＃34;应该被视为高度为0.即，＆＃34; S＆＃34;应该在靠近底部的地方，而＆＃34; 1＆＃34;和＆＃34; 2＆＃34;应该对齐，好像没有＆＃34; S＆＃34;一点都不。

有没有一种优雅的方法来实现这一目标？就像CSS属性在创建布局时不包含元素并在之后插入？

Here is a JSFiddle布局无法正常工作。

Answer 1

顶部和左侧值可能需要调整，但这正是您想要的

.middle {
    text-align: center;
    vertical-align: middle;
    padding-right: 10px;
    position: relative;
}
input[value="S"]{
    position:absolute;
    top: 50%;
    left: 25%;
}

通过定位absolute，您可以将其从文档流中取出，因此绝对元素不受非绝对元素的影响，反之亦然

在垂直居中于td内时，忽略按钮的高度

1 个答案: