Flexbox:在底部和中心之间对齐? [英] Flexbox: Align between bottom and center?

问题描述

有人知道如何使用 flexbox 创建这种布局吗?

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

我现在有这个:

.aligner {显示:弹性；对齐内容:居中；弹性方向:列；对齐项目:居中；高度:100%；}

<h3>超人</h3><p>FTW</p><按钮>按钮</按钮>

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

解决方案

你可以试试这个布局:

• 带有 flex: 1
的匿名元素
• 标题和副标题(titles)
• 带有 flex: 1 和 display: flex 的元素.

标题上方和下方的元素将等量占用标题剩余的可用空间.所以标题会居中.

这些元素也可以是弹性容器，您可以根据需要在其中对齐它们的内容.

html, body {height: 100% } * { margin: 0;}.aligner, .below {显示:弹性；对齐内容:居中；弹性方向:列；对齐项目:居中；}.aligner {高度:100%；}.aligner::before { 内容:'';}.aligner::before, .below {弹性:1；}

<h3>超人</h3><p>FTW</p><div class="下面"><按钮>按钮</按钮>

Does someone know how to create this layout, using flexbox?

The text is going to be placed in the center, and the button is going to be placed between the text and bottom.

I have this now:

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

<div class="aligner">
  <h3>SUPERMAN</h3>
  <p>FTW</p>
  <button>BUTTON</button>
</div>

This aligns everything in the center, but I want only the text to be in center, and the button between center and the bottom.

解决方案

You can try this layout:

• Anonymous element with flex: 1
• The title and subtitle (titles)
• Element with flex: 1 and display: flex.

The elements above and below the title will take available space left by titles in equal amounts. So the titles will become centered.

Those elements can also be flex containers, and you can align their contents inside them as desired.

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 class="aligner">
  <h3>SUPERMAN</h3>
  <p>FTW</p>
  <div class="below">
    <button>BUTTON</button>
  </div>
</div>

这篇关于Flexbox:在底部和中心之间对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！