围绕两个元素之间的一个div垂直

所以我有两个元素，在我的情况下的图像和按钮。我在页面顶部有图片，底部有按钮。我想有一个div（或某些其它元件）来显示文本，但我需要它的两个元件之间的中心。围绕两个元素之间的一个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>

JSFIDDLE

我使用HTML和Javascript。

来源

2017-07-11 Noah

[本文]（http://vanseodesign.com/css/vertical-centering/）帮我垂直居中的CSS元件。 –

的可能的复制[如何verticaly对准到与定义宽度/高度一个div的内容的中心？]（https://stackoverflow.com/questions/10968726/how-to-verticaly-align-into-the-中心的最内容的-A-DIV-具有定义-WIDT） –

。看看Flexbox的现代布局： a guide to flexbox

来源

2017-07-11 16:49:44 T4rk1n

你可以使用flexbox，这在其他的答案建议。虽然有时你可能很难纠缠，但是在你第一次尝试时就会遇到困难。尽管强烈建议将flexbox添加到工具带上。

为了解决这个问题可能更简单： 1.）你可以设置父div的高度（无论你想要什么），然后在你想要居中的元素上设置margin-top。你可以调整它，直到它正确。或者...... 2）另外：您也可以设置的位置是：相对的;和顶部：100像素（或任何其设置到中间设置位置的规则将允许您设置顶部或左侧，右侧或底部没有设置位置规则，你不能使用这些规则

来源

2017-07-11 16:57:13 ardev

。创建一个<div></div>持有任何你希望把它再处理与CSS文本。

来源

2017-07-11 17:00:25

Flexbox，就提供了最好的，并从传统的解决方案短期解决方案。您可以在这里找到工作小提琴https://jsfiddle.net/rr0e4qh7/14/

你的HTML

<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 
}

来源

2017-07-11 17:08:40

围绕两个元素之间的一个div垂直

回答

相关问题