沿垂直轴对齐具有不同水平位置的元素，无需硬编码

Question

我有一个包含两个元素的容器，如下所示：

<div id="container">
    <div id="button-container">
        <!-- sometimes other buttons as well in this part -->
        <input type="button" value="EXIT">
    </div>
    <h1 id="title-h1">Page Title</h1>
</div>

我想将#button-container垂直与#title-h1对齐 - 也就是说，我希望它们都位于#container div的垂直中心。

相反，我希望将#button-container推到左边缘，而#title-h1应该水平放在#container的中心。

最后，我想在没有任何值的硬编码的情况下这样做。

以下是无效的CSS（也许应该是），但它是我正在努力实现的伪代码：

#button-container {
    position: align-to-parent(left, middle);
}
#title-h1 {
    position: align-to-parent(middle, middle);
}

我能想出的最好的方法就是硬编码按钮容器的位置，如下所示：

#container {
    padding: 5px;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

#button-container {
    position: absolute;
    left: 5px; /* since the padding has no effect on it */
    top: 33%; /* not very resilient */
    display: inline-block;
}

#title-h1 { 
    display: inline-block;
}

JSFiddle

我怎样才能使它在各种容器和字体的大小方面更具弹性？

Answer 1

对于完全动态的垂直居中，您可以使用CSS将元素的top设置为50%，然后使用CSS3 transform-translate属性将元素偏移一半。高度。例如：

#button-container {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

这是一个jsFiddle演示：http://jsfiddle.net/6hku6gdo/

如果您不想使用翻译，只要知道元素的高度，就可以设置负边距。我倾向于使用这种方法，除非元素的高度可能会改变。

#button-container {
    position: absolute;
    top: 50%;
    margin-top: -20px; /* assuming the height is 40px */
}

要横向居中，您可以使用display: inline-block和text-align: center，或使用与上述类似的方法，方法是使用left: 50%并设置负边距，或使用供应商前缀{{ 1}}属性。

Answer 2

将两个元素垂直对齐的最简单方法是使它们成为内联块，并使它们成为垂直对齐的atrribute：

#button-container, h1 {
    display : inline-block;
    vertical-align : middle;
}
#container { border: 1px solid red; }

（我还在容器上添加了边框，以便更清楚地显示正在发生的事情。）

在这种情况下，水平居中h1现在变得棘手，因为现在一条线同时保持头部和按钮，但你可以计算出标题的宽度，然后选择百分比偏移（实验以获得最佳值）合适的容器方：

h1 { 
    position : relative;
    right : -30%;
}

当屏幕变窄时，它会偏离屏幕宽度偏离中心（但您可以添加一两个媒体查询来补偿）。