html – Flexbox：在底部和中间之间对齐？

概述参见英文答案 > Center and bottom-align flex items                                    3个 有人知道如何使用flexbox创建此布局吗？ 文本将放在中心,按钮将放在文本和底部之间. 我现在有这个： .aligner { display: flex; justify-content: center; flex-dir 参见英文答案 > Center and bottom-align flex items                                    3个
有人知道如何使用flexBox创建此布局吗？

文本将放在中心,按钮将放在文本和底部之间.

我现在有这个：

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

<div >  <h3>SUPERMAN</h3>  <p>FTW</p>  <button>button</button></div>

这会对齐中心的所有内容,但我只希望文本位于中心,而中心和底部之间的按钮.

解决方法 你可以试试这个布局：

> flex的匿名元素：1
>标题和副标题(标题)
>带有flex的元素：1并显示：flex.

标题上方和下方的元素将占用标题等量的可用空间.所以标题将成为中心.

这些元素也可以是flex容器,您可以根据需要将它们的内容对齐.

HTML,body {height: 100% } * { margin: 0; }.aligner,.below {  display: flex;  justify-content: center;  flex-direction: column;  align-items: center;}.aligner {  height: 100%;}.aligner::before { content: ''; }.aligner::before,.below {  flex: 1;}

<div >  <h3>SUPERMAN</h3>  <p>FTW</p>  <div >    <button>button</button>  </div></div>

总结

以上是内存溢出为你收集整理的html – Flexbox：在底部和中间之间对齐？全部内容，希望文章能够帮你解决html – Flexbox：在底部和中间之间对齐？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。