在两个元素之间垂直居中显示 div

Question

所以我有两个元素，在我的例子中是一个图像和一个按钮。我有页面顶部的图像和底部的按钮。我想有一个div(或其他元素(来显示文本，但我需要它在两个元素之间居中。

<div style="text-align: center;">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
<div style="text-align: center; border: 3px solid blue;">Help</div>
<button style="position: absolute; bottom: 5px;">Hi</button></div>

吉斯菲德尔

我正在使用HTML和Javascript。

Answer 1

查看现代布局的弹性框： 弹性框指南

Answer 2

你可以使用flexbox，正如其他答案中所建议的那样。 不过，有时这很难争论，在您第一次尝试时。 尽管强烈建议将弹性框添加到您的工具带中。

要解决此问题，也许更简单： 1.( 您可以设置父div 的高度(根据需要(，然后在要居中的元素上设置边距顶部。您可以调整它，直到它正确放置。 或。。。 2.(或者：您也可以设置位置：相对;顶部：100px(或任何将其设置在中间的内容。设置位置规则将允许您设置顶部，或左侧，右侧或底部。 如果不设置排名规则，则无法使用这些规则。

Answer 3

创建一个<div></div>来保存您想要放入的任何文本，然后使用 CSS 对其进行操作。

Answer 4

Flexbox 提供了与传统解决方案相比的最佳和简短的解决方案。 你可以在这里找到工作小提琴 https://jsfiddle.net/rr0e4qh7/14/

您的网页

<div class="container">
<div class="image">
<img src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
</div>
<div class="text">
Help
</div>
<div class="btn">
<button>
My Button
</button>
</div>
</div>

这是CSS部分

.container{
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
}
.text{
display: flex;
height: 100%;
align-items: center;
justify-content: center
}